How to set the Google Map zoom level to show all the markers?
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&v=2&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() .
If you are using API version 3 you can replace
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
with
map.fitBounds(markerBounds).
set the Google Map zoom level to show all the markers?
Maps API v3
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.
链接地址: http://www.djcxy.com/p/81590.html