ansaurus

Question

Answer 1

+1 A:

The fitBounds() method should work. However note that it always keeps some padding on the sizes of the map. Consider the following example:

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

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById('map'), { 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      });

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

      var points = [
        new google.maps.LatLng(51.22, 4.40),
        new google.maps.LatLng(50.94, 3.13)
      ];

      // Extend bounds with each point
      for (var i = 0; i < points.length; i++) {
        bounds.extend(points[i]);
        new google.maps.Marker({position: points[i], map: map});
      }

      // Apply fitBounds
      map.fitBounds(bounds);  

      // Draw the bounds rectangle on the map
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();

      var boundingBox = new google.maps.Polyline({
        path: [
          ne, new google.maps.LatLng(ne.lat(), sw.lng()),
          sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
        ],
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      boundingBox.setMap(map);
   </script> 
</body> 
</html>

Screenshot from the above example:

Google Maps fitBounds Padding

The red bounding box represents the LatLngBounds object when extended with both markers. Note that the map canvas is 543px wide, and also note the padding margin to the left and right of the bounding box.

Now if we reduce the width of the map canvas by just 1px, using 542px, the fitBounds() method will pop to a lower zoom level:

Google Maps fitBounds Padding

Daniel Vassallo 2010-07-14 23:11:14

Nice reaction.Still, i have to wonder, if you notice my screenshot, my markers aren't in the middle, more on the left half.So something else has to be wrong, also, the zoom doesn't get "closer" when i adjust the width...

NicoJuicy 2010-07-15 08:15:40

@NicoJuicy: Is it possible to update your question with a full example that replicates your problem? I tried to place the markers at the same location as yours, and `fitBounds()` appears to be working much better in my screenshots.

Daniel Vassallo 2010-07-15 11:32:11

I have updated my source :)

NicoJuicy 2010-07-16 08:45:51

Answer 2

A:

I have found the solution.

Instead of doing a single

bounds.extend(myLatLng)

Everytime you add a myLatLng to your bounds, do these actions

bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

Hope this helps anyone!

NicoJuicy 2010-07-16 09:03:31

ansaurus

tags:

views:

answers:

Google Maps v3 - Automating Zoom Level?

related questions