12

I am new to google maps api. I'd like suggestions on achieving the following functionality: whenever the page loads, the map will load centered around the US. Imagine a box around the US with given lat/longs specifying the minimum and maximum boundaries. I need the map to load at the appropriate zoom (and zoom needs to be disabled) such that this box composes the entire map.

Basically, I'm wondering if there is a function that loads the map based on lat/long boundaries (or some way to acheive this), rather then loading the map given a zoom level.

Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
hjk
  • 123
  • 1
  • 5

2 Answers2

14

Assuming you are using the v3 API, you may want to use the fitBounds method as follows:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps fitBounds</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': 'US'}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport);               
      }); 
   </script> 
</body> 
</html>

Screenshot:

Google Maps fitBounds

In the above example, I'm getting the viewport of the US by geocoding. However, you could also create a LatLngBounds object yourself by passing the North East and South West points, and the fitBounds method will zoom and pan your map such that it will fit on the map canvas.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
Daniel Vassallo
  • 337,827
  • 72
  • 505
  • 443
  • @hjk: I answered [a similar question a few months ago](http://stackoverflow.com/questions/2494756/fitbounds-in-google-maps-api-v3-does-not-fit-bounds/2496558#2496558). It shows with a red bounding box how `fitBounds` reacts. The red bounding box represents the `LatLngBounds` that you will pass to `fitBounds`. – Daniel Vassallo May 29 '10 at 23:51
  • Thanks Daniel, that is helpful. So there is no way with Google Maps to adjust the granularity of the zoom? I.e. their zoom levels are fixed? – hjk May 29 '10 at 23:57
  • Also, looking at the red bounding box for the US in your other response, why is the bounding box clipping alaska? If the answer is because its only considering the contiguous US states, wouldn't the box be "zoomed in" more? – hjk May 30 '10 at 00:00
  • @hjk: RE the first question, no. You cannot adjust the granularity of the zoom levels. You cannot have a zoom level of 12.5 for example. That is why there is always some border space between the bounding box your provide to the fitBounds method and the map canvas. – Daniel Vassallo May 30 '10 at 00:08
  • @hjk: As for the second question, in that example (as in this one) I got the bounding box from Google's Geocoding API. It think it's just a bounding bounding box that covers the majority of the land. I don't know why it returns a bounding box shifted to the south, but from what I noticed, almost all geocoding of countries return a bounding box where the country is slightly clipped. Note Russia and Italy in that other question. – Daniel Vassallo May 30 '10 at 00:11
  • 3
    And then you might as well hard-code the values that geocoder sets to avoid the delay in setting position as well as the extra request: zoom: 5, center: new google.maps.LatLng(38.55547456,-95.664999), – awolf Jul 21 '12 at 22:48
0

Well, since the size and shape of the US doesn't change that often you could manually find the optimal settings and use those.

npinti
  • 51,780
  • 5
  • 72
  • 96