5

I need to plot a set of coordinates on the map in response to a user selection, and when it happens, I'd like to pan the map to focus on that set of points. How can I find the smallest bounding box (LatLngBounds) that contains all of the coordinates?

Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
airportyh
  • 21,948
  • 13
  • 58
  • 72

1 Answers1

13

In addition to the Stack Overflow post which @Crescent Fresh pointed to above (which is using the v2 API), the method you'd want to use is the LatLngBounds.extend().

Here's a complete example, using the v3 API:

<!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 America
     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>

Screenshot:

Google Maps LatLngBounds.extend() Demo

Community
  • 1
  • 1
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • The problem with .extend() is that it is directional. It allows the bounding box to grow, but not to shrink. Thus, if you already created a bounding box with all the markers and then remove a marker, the only way to get it to shrink is to reiterate through all the markers again. this quite frankly seems inefficient to me. Anyone know of a better way that doesn't require looking through all the markers again with a new LatLngBounds? – Andrew De Andrade Jan 06 '11 at 19:57
  • 1
    @Andrew: It is quite easy to test if the deleted marker lies on the bounding box border... Therefore you could simply regenerate the bounding box only when a marker that lies on the border is deleted... The more markers you have, the less likely it is that a marker on the border is deleted. And if you only have a few markers, the operation will still be very fast. – Daniel Vassallo Jan 06 '11 at 21:03
  • @AndrewDeAndrade It's not inefficient to recalculate the bounds if a marker is removed. Any built-in function they provided would probably do exactly that. The alternative is to store each step of extending the bounds in an array, and refer to the previous array element if you remove one. – Frug Aug 06 '14 at 17:59