Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatically adjust zoom to accommodate all marker in a google map

Using the latest version of Google maps. How to add markers using longitude and latitude and automatically adjust the zoom level of the map to include all the markers using JavaScript?

like image 221
TrustyCoder Avatar asked Oct 09 '10 20:10

TrustyCoder


People also ask

How do you zoom all the way in on Google Maps?

Zoom in the mapDouble tap a spot on the map, and then: Drag down to zoom in. Drag up to zoom out.

How do I move a marker smoothly on Google Maps?

The transition() and moveMarker() are used to move marker smoothly on click on the Google map.

How do I change the zoom speed on Google Maps?

To turn those two actions into zooming, you simply hold down command. You can also change the scroll direction you use to zoom in and out and adjust the speed of zooming. Actually, moving the map can be a little touchy when clicking and dragging, so it's better to stick with scrolling.


1 Answers

Google Maps API v3 provides a LatLngBounds object to which you can add multiple LatLng objects. You can then pass this to Map.fitBounds() function as described here:

  • Zoom-To-Fit All Markers, Polylines or Polygons on A Google Map - API v2
  • Zoom-to-Fit All Markers on Google Map v3

Partial Example

var latlng = [     new google.maps.LatLng(1.23, 4.56),     new google.maps.LatLng(7.89, 1.01),     // ... ];  var latlngbounds = new google.maps.LatLngBounds(); for (var i = 0; i < latlng.length; i++) {     latlngbounds.extend(latlng[i]); } map.fitBounds(latlngbounds); 
like image 79
Salman A Avatar answered Oct 09 '22 01:10

Salman A