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

后端未结

关注

 4  1873

时光取名叫无心

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 zoo

相关标签:

4条回答

刺人心

2020-12-08 01:11
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));
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-12-08 01:16
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

春和景丽

2020-12-08 01:20

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

0 讨论(0)

再見小時候

2020-12-08 01:27
If you are using API version 3 you can replace
```
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
```
with
```
map.fitBounds(markerBounds).
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

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

Maps API v3