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

Question

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)

score 33 · Accepted Answer · edited Jul 24 '14 at 11:17

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

random-forest-cat · Answer 2 · 2016-09-22T14:25:11.380

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

Maps API v3

get markers
get boundaries of markers
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.

score 24 · Answer 3 · answered Nov 23 '11 at 05:55

24

If you are using API version 3 you can replace

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

with

map.fitBounds(markerBounds).

answered Nov 23 '11 at 05:55

Steve

901
9
13

score 3 · Answer 4 · answered Mar 02 '10 at 10:42

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));

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

4 Answers4

Maps API v3

Linked