In usability we trust

UX and all things web

Bounding Box in Google Maps

Normally when you initialize a new Google map you set the coordinates for the center of the map and manually specifies the initial zoom level. Sometimes, however, there’s a need to dynamically calculate the center point and zoom level for certain content to fit into the viewport.

Let’s say that you have a number of markers on a map and you want the map to be displayed so that they all fit inside the viewport. You could of course experiment with center point and zoom levels to get it right. But what if the markers are put there dynamically so you don’t know beforehand where they’ll show up?

That’s where this trick will come in handy.

Using a Bounding Box

First you have to calculate the bounding box. That is, the coordinate for the south-west and north-east corners. In this case the coordinates for the marker that’s most south and the marker that’s most west provides the coordinates for the south-west corner. And vice versa for the north-east corner.

Now that you know the coordinates you just have to create a GLatLngBounds object, define it’s coordinates and serve it to GMap2.setCenter().

GLatLngBounds takes two optional arguments. A GLatLng for the south-west corner and a GLatLng for the north-east corner.

GMap2.getBoundsZoomLevel() calculates the appropriate zoom level to fit the bounding box in the available viewport. It also adds some extra padding around the box.

map = new GMap2(document.getElementById("map"));

// Define the two corners of the bounding box
var sw = new GLatLng(59.0, 13.12);
var ne = new GLatLng(60.35, 16.90);

// Create a bounding box
var bounds = new GLatLngBounds(sw, ne);

// Center map in the center of the bounding box 
// and calculate the appropriate zoom level
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

Watch the live demo

I was shown this technique by my good friend Fredrik Jonsson, who writes about programming on freddes.se.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

17 Comments

  1. Thank you so much I been looking for this for a looong time 🙂

  2. Wait a minute – where did you get the values for sw and ne from? Wasn’t the point of the article to show how to create a box around a _dynamic_ set of points?

    • Alan: Yes that’s right, but for the sake of simplicity in the example, I have explicitly defined the corners of the bounding box. In a real-world implementation I would naturally calculate sw and ne from the data that I’m showing.

  3. Can you explain a good way to determine the sw and ne from the data?

    I can imagine doing a minimum and maximum loop thru all the data, but it seems like there should be an easier way to get via an api call of some sort.

  4. Alan: There are several ways to do it servers-side depending on which language you use. In a solution I’m currently working on where we use C# and SQL Server 2008 I use the SqlGeometry object to handle GEO data. I get the data that I want to display on the map as a SqlGeometry object and on that object I then call the method STEnvelope() which returns a Bounding Box for the GEO data.

    In the Google Maps API there’s the GLatLngBounds class which is a representation of a BoundingBox. Some overlays such as GPolyLine and GPolygon has a getBounds() method that returns a GLatLngBounds. In the case of markers I don’t know of any easy way to do it. I guess one have to do as you suggest and loop through them all to extract min and max values.

  5. Actually you don’t have to Define the two corners of the bounding box because it can assign later by using extend.

    var bounds = new GLatLngBounds();
    bounds.extend(GLatLng(lat:Number, lng:Number));

    so you have to assign all marker by using this code
    bounds.extend(GLatLng(lat:Number, lng:Number));

    but sometimes the function of :
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    didn’t work properly and will returns an incorrect zoom level. until now i can’t figure out this problem.

  6. Aiska: Cool! I never thought of that, but naturally that’s one way to do it. Thanks!

    I have never encountered the error you’re talking about myself. Could be a bug in the API?

  7. Gabriel Svennerberg: yeah that’s right maybe this is bugs in API.

    I found new method how to set zoom level of a google map base on markers.

    maybe you can check this out for your reference. Thanks

    Set zoom level of a google map base on markers

  8. Aiska: After looking at your code again it occurred to me that there’s a problem in it and that is in how you extend the bound. You don’t use the new keyword when you create a new GLatLng. It should be:

    bounds.extend(new GLatLng(lat, lng));

    Maybe that’s the reason it doesn’t work properly?

    I haven’t looked at your new method yet.

  9. If you’re getting the lat and long from a collection of Ruby objects.

    Here’s the method:

    # returns a hash of top right and bottom left bounds
    def self.bounds(collection)
    top = 0
    bottom = 0
    right = 0
    left = 0
    initially_set = false
    collection.each do |point|
    if point.lat and point.long
    if !initially_set or point.long > top
    top = point.long
    end
    if !initially_set or point.long right
    right = point.lat
    end
    if !initially_set or point.lat < left
    left = point.lat
    end
    initially_set = true
    end
    end
    # you could add 10% to each value here
    # if your map is correct portioned (otherwise)
    # your centre will be skewed
    # now create the hash
    result = Hash.new
    result[:top] = top
    result[:bottom] = bottom
    result[:right] = right
    result[:left] = left
    return result
    end

    And then in the map definition…

    // if we have a collection of items, set the map to fit them all
    // Define the two corners of the bounding box
    var sw = new GLatLng(, );
    var ne = new GLatLng(, );
    var bounds = new GLatLngBounds(sw, ne);

  10. OK that didn’t post directly… I’ll reformat it and post again later.

  11. Here This bounded rectangle is not working in all the cases
    when we move the map at some zoomlevel

    NorthEast (topRight) points (70.495574, -102.304688)
    topRight[0] = 70.495574;
    topRight[1]= -102.304688;

    SouthWest(BottomLeft) points (-59.712097, 47.109375)
    BottomLeft[0] =-59.712097;

    and my point is under this getBounds

    we have a condition like

    if(lat > bottomLeft[0] and lat BottomLeft[1] and lng < TopRight[1])
    {}
    this condition falils in some points even though its under that Bounded Rectangle
    and the actual point is (30.145127,75.234) between those top and bottom points

  12. We have an image with two points in the middle and the bound area in pixels only and two reference points in the image with their pixel coordinates. We can get a zoom/scale for the image based on the above data.

    We also know the latlng for the above two reference points.

    How do I set the box north-east and south-west corners so that I can place it on the map.

    Appreciate any help/pointers.

    Thanks

  13. Hello,

    I have a inquiry for the webmaster/admin here at http://www.svennerberg.com.

    Can I use some of the information from this post above if I give a link back to your website?

    Thanks,
    Alex

  14. Hi,

    I have used ur code. but i m not able to see the any bounding box….

    Can u please help me on this….

    Rerads,
    Naresh

    • merhaba,
      ?imdi hocam?z ödev verdi ajax ile google map de s?nrlay?c? noktalar koyararak google map gösterrecem java ile ajax nas?l yapabilirim yard?mc? olurmusunz

Leave a Reply to buy kinect Cancel reply

Your email address will not be published.

*