Menu
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)
453
Use GMap2. getBounds() to find the bounding box. The use GLatLngBounds. containsLatLng() to check each marker to see if it is visible.
Click on the Google Map menu item, and then click on the Settings tab. You will then see the option to Show all locations. Click to enable this option and Save. Here's how that Google Map menu item looks on a mobile device, with various pins from the custom list visible on the map at once.
Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.
Zoom in the mapDouble tap a spot on the map, and then: Drag down to zoom in. Drag up to zoom out.
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().
158
set the Google Map zoom level to show all the markers?
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
