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