How to set the Google Map zoom level to show all the markers?

36
votes

How do I set the zoom level to show all the markers on Google Maps?

In my Google Map there are different markers in different positions. I want to set google map zoom level based on the range of markers (that means in the view of google map, i want to see all markers)

4
javascriptgoogle-maps

4 Answers

31
votes

There you go:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps getBoundsZoomLevel Demo</title> 
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
           type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 

   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      var markerBounds = new GLatLngBounds();

      for (var i = 0; i < 10; i++) {
         var randomPoint = new GLatLng( 39.00 + (Math.random() - 0.5) * 20, 
                                       -77.00 + (Math.random() - 0.5) * 20);

         map.addOverlay(new GMarker(randomPoint));
         markerBounds.extend(randomPoint);
      }

      map.setCenter(markerBounds.getCenter(), 
                    map.getBoundsZoomLevel(markerBounds));
   }
   </script> 
</body> 
</html>

We are creating 10 random points in the above example and then passing each point to GLatLngBounds.extend(). Finally we get the correct zoom level with GMap2.getBoundsZoomLevel().

Google Maps getBoundsZoomLevel Demo

23
votes

If you are using API version 3 you can replace 

map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));

with

map.fitBounds(markerBounds).
23
votes

set the Google Map zoom level to show all the markers?

Maps API v3

  1. get markers
  2. get boundaries of markers
  3. set center on map by fitting it to marker boundaries
var markers = [markerObj1, markerObj2, markerObj3];

var newBoundary = new google.maps.LatLngBounds();

for(index in markers){
  var position = markers[index].position;
  newBoundary.extend(position);
}

map.fitBounds(newBoundary);

The code above will automaticlly center and zoom your map so that all markers are visible.

3
votes

You can use the extend method of the GLatLngBounds object, which represents a rectangle on the map.

var bounds = new GLatLngBounds();

Loop around all the points on your map, extending the bounds of your GLatLngBounds object for each one.

bounds.extend(myPoint);

Finally you can use your bounds object to set the centre and zoom of your map (where map is your map object)

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));