CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
TrustyCoder
TrustyCoder

Reputation: 4789

Automatically adjust zoom to accommodate all marker in a google map

Using the latest version of Google maps. How to add markers using longitude and latitude and automatically adjust the zoom level of the map to include all the markers using JavaScript?

Upvotes: 45

Views: 56210

Answers (3)

Jose Mhlanga
Jose Mhlanga

Reputation: 855

The following did the trick for me

map.fitBounds(bounds);


 // add a zoom to the map


var listener = google.maps.event.addListener(map, 'idle', function()
        {
          if(map.getZoom() > 16)
            map.setZoom(17);
          google.maps.event.removeListener(listener);
        });

Set your desired zoom in the setZoom() method. The larger the value, the wider it shows location details, the smaller the value, it throttles and shrinks the location details

Upvotes: 4

Salman Arshad
Salman Arshad

Reputation: 272006

Google Maps API v3 provides a LatLngBounds object to which you can add multiple LatLng objects. You can then pass this to Map.fitBounds() function as described here:

Partial Example

var latlng = [
    new google.maps.LatLng(1.23, 4.56),
    new google.maps.LatLng(7.89, 1.01),
    // ...
]; 
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
    latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

Upvotes: 94

RedBlueThing
RedBlueThing

Reputation: 42522

You add markers to your google map by instantiating a marker object for each of your latitude/longitude pairs:

var marker = new google.maps.Marker({
    position: currentLatLng, 
    map: map,
    title:"Title!"
});

The map option on the marker constructer will associate the new market object with your map.

To zoom your map to include your new markers, you use the fitBounds method on the map object. fitBounds takes a latLngBounds object as a parameter. This object has a handy extend method which will adjust the bounds to include a new latitude/longitude. So you just need to spin through all your points, calling extend on a single latLngBounds object. This will extend the bounds to include all your markers. Once you have done this, you pass this object into the fitBounds method on the map and it will zoom to show all your new markers.

Upvotes: 26

Related Questions