For dynamic zoom on google map

3,715 views

Skip to first unread message

meetgauravasthana

unread,

Aug 10, 2016, 7:16:07 PM8/10/16

to Google Maps JavaScript API v3

Hi,

I am trying to make the zoom level in our google map dynamic on the basis of the below parameters:

1. The no of markers that come on the map.

2. The relative placements/positions of the markers on the map.

For example:

a) If there are only 2 markers but the markers are places far away from each other then the zoom level must be small enough to encapsulate both the markers.

b) If there are many markers but placed very close to each other then the zoom level must be high and also take care the encapsulation of all the markers on the map.

I browsed through the net for some solutions and partially succeeded too. But the zoom level is still hard-coded and our requirement is to make it dynamic on the above criteria.

I have seen lot of custom JS code as a solution for the above. But since this requirement is quite common, so I guess there is some kind of out of the box solution is already there provided in the google maps API, for achieving my above goal . I would like to leverage that.

Request any one to help me out here if they any such solution from the API.

Thanks and Regards,

Gaurav.

Sudip Barman

unread,

Aug 11, 2016, 7:07:21 AM8/11/16

to Google Maps JavaScript API v3

Hi Gaurav,

you can use boundBox to set zoom of the map.

Just create one boundbox from google map api and keep adding markers and extend the bound when all markers are added to the boundBox just set the bounbos to map.

Map will automatically fit the zoom level.

Example:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps LatLngBounds.extend() Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.TERRAIN
   });

   var markerBounds = new google.maps.LatLngBounds();

   var randomPoint, i;

   for (i = 0; i < 10; i++) {
     // Generate 10 random points within North East USA
     randomPoint = new google.maps.LatLng( 39.00 + (Math.random() - 0.5) * 20, 
                                          -77.00 + (Math.random() - 0.5) * 20);

     // Draw a marker for each random point
     new google.maps.Marker({
       position: randomPoint, 
       map: map
     });

     // Extend markerBounds with each random point.
     markerBounds.extend(randomPoint);
   }

   // At the end markerBounds will be the smallest bounding box to contain
   // our 10 random points

   // Finally we can call the Map.fitBounds() method to set the map to fit
   // our markerBounds
   map.fitBounds(markerBounds);

   </script> 
</body> 
</html>

Thanks,

Sudip Barman

Reply all

Reply to author

Forward

0 new messages