fitbounds() in Google maps api V3 does not fit bounds

by

This happens because the fitBounds() needs to snap to a viewport that fits the map canvas using the maximum zoom level possible. On the other hand, the viewport returned by the geocoder is not dependent on the size, layout or zoom level of the map canvas. Therefore the fitBounds() method adjusts the map’s viewport in order to view the passed LatLngBounds in full at the centre of the map.

You may want to check the following example for a clearer demonstation:

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

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

      geocoder.geocode({'address': 'RU'}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport);               

         var boundingBoxPoints = [
            ne, new google.maps.LatLng(ne.lat(), sw.lng()),
            sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
         ];

         var boundingBox = new google.maps.Polyline({
            path: boundingBoxPoints,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
         });

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

Below are some screenshots for various countries from the above example. The red bounding box is the viewport returned by the geocoder. Note the difference between the bounding box and the actual viewport, as adjusted by fitBounds():

Country: US

US

Country: RU

RU

Country: IT

IT

More Related Contents:

  1. Google Maps API v3: Can I setZoom after fitBounds?
  2. Verify if a point is Land or Water in Google Maps
  3. Google Maps v3 – limit viewable area and zoom level
  4. Using Address Instead Of Longitude And Latitude With Google Maps API
  5. How to Display Multiple Google Maps per page with API V3
  6. Google Maps API autocomplete 2nd address fields on same page
  7. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  8. Do I need to hide API key when using google maps js API? If so, how?
  9. Have just one InfoWindow open in Google Maps API v3
  10. Midpoint of route in google maps
  11. Google Maps – How to get the distance between two point in metre?
  12. Load google maps v3 dynamically with ajax
  13. How to get the formatted address from a dragged marker in Google Version Maps
  14. How to draw a polygon around a polyline in JavaScript?
  15. Display world map with no repeats
  16. Request main road / curbside StreetView panoramas instead of back alleys from API
  17. Open infoWindows from an external link outside of the google map
  18. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  19. Animating Multiple Markers
  20. Google Maps API v3: How do I dynamically change the marker icon?
  21. Google map custom marker with css rounded corner
  22. How to detect if a point is in a Circle?
  23. Google Maps: Auto close open InfoWindows?
  24. remove route with google map
  25. Check if a latitude and longitude is within a circle google maps
  26. Highlight polygon and tint rest of map using Google Maps [duplicate]
  27. Custom Google Map API V3 Zoom Buttons
  28. Using Longitude/Latitude as Waypoint
  29. How to connect two points in Google map..?
  30. Google Maps API Multiple Markers with Infowindows

Leave a Comment