Google maps: API 3, how to set polyline in the center

user123_456 picture user123_456 · Oct 23, 2012 · Viewed 11.3k times · Source

Hi all I need to be able to center the polyline in the center of the map

Only the necessery part of the code...

success: function(data) {//callback to be executed when the response has been received

    data = JSON.parse(data);
    for (var i=0;i<data.length;i++) {
        flightPlanCoordinates[i] = new google.maps.LatLng(data[i].x,data[i].y);
    }
    map = new google.maps.Map(document.getElementById("map_find"),
    mapOptions);
    flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            strokeColor: "#8a2be2",
            strokeOpacity: 1.0,
            strokeWeight: 3
    });

    flightPath.setMap(map);
    map.setZoom(5);
    map.setCenter(flightPlanCoordinates);
}

This is not doing what I need..My map is not centered and not zoomed, how to achieve this?

Answer

Marcelo picture Marcelo · Oct 23, 2012

You can use this function, calling it with the polyline as parameter:

function zoomToObject(obj){
    var bounds = new google.maps.LatLngBounds();
    var points = obj.getPath().getArray();
    for (var n = 0; n < points.length ; n++){
        bounds.extend(points[n]);
    }
    map.fitBounds(bounds);
}

Call it:

flightPath.setMap(map);
zoomToObject(flightPath);

Just make sure that your map object is a global variable.