Google Maps API v3 - Geocoder results issue with bounds

Question

Goal: I want to have a custom search (geocode) function and be able to list and click each result and display it on the map.

Wanted: Adjust map bounds / zoom level accordingly, i.e. searching for "MA, USA" should zoom the map to let me see the whole Massachusetts state, while searching for "Boston, MA, USA" should zoom on the Boston area. When listing multiple results, the same should apply when clicking on a result.

Issue: I can use the geometry.bounds object with fitBounds - but - some results you get using the geocoder do not have that geometry.bounds object.

A quick example: searching for "Boston" returns

Boston, MA, USA
Boston, IN, USA
Boston, KY, USA
Boston, GA 31626, USA
Boston, Salem, VA 22713, USA
Boston, NY 14025, USA

Both "Boston, KY" and "Boston NY 14025" do not have bounds.

Question: Is there a reliable way to display any geocoder result on a map at the appropriate zoom level?

Right now I am using something like that but I find this ugly and it doesn't solve the zoom issue

if (results[0].geometry.bounds) {

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

} else {

    map.setCenter(results[0].geometry.location);
    // eventually set zoom here to some middle-range value (ugly)
}

Surgery

Have you tried using the viewport object. – Disseminule

What values should I be looking for in the viewport object? It doesn't seem to have any bounds returned in there. Thanks. – Surgery

Answer 1

Right. After trying both methods and testing, it comes out that:

1. the geometry.bounds object is "optionnaly returned" as the doc says
2. we don't exactly know what the geometry.bounds object is based on
3. geometry.bounds "may not match the recommended viewport" and often doesn't
4. geometry.bounds returns a square or rectangle of any size and shape while the viewport functions always return a rectangle with the same aspect ratio (around 1.43), whatever your map container dimensions are, as far as I tested.

Below is the example of San Francisco, CA, mentioned in the doc.
In red using geometry.bounds and in blue using the viewport functions.

The solution is simple enough and is reliable.

var resultBounds = new google.maps.LatLngBounds(

    results[0].geometry.viewport.getSouthWest(), 
    results[0].geometry.viewport.getNorthEast()
);

map.fitBounds(resultBounds);

Surgery

Do you know if these properties still hold? Namely the aspect ratio on the aspect ratio on the viewport? Also source of info? – Valentinavalentine

Can you not test it? I don't think I had a fiddle for that. – Surgery

Answer 2

The viewport object has the information you need to make a bounds object. Something like this:

var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(results[0].geometry.viewport.southwest.lat, results[0].geometry.viewport.southwest.lng),
    new google.maps.LatLng(results[0].geometry.viewport.northeast.lat, results[0].geometry.viewport.northeast.lng)
);

Then you can use fitBounds on that new bounds object, just like you're doing for the returned bounds object. Like this:

map.fitBounds(bounds);

Vandalism

I will test this in a minute, but, if I understand well, all results will have these 4 viewport values. So if they have, why would some results come with the geometry.bounds object and some not? Strange, I think... – Surgery

I'm not entirely sure, but here's Google's explanation taken from code.google.com/apis/maps/documentation/geocoding/#Results: "bounds (optionally returned) stores the bounding box which can fully contain the returned result. Note that these bounds may not match the recommended viewport. (For example, San Francisco includes the Farallon islands, which are technically part of the city, but probably should not be returned in the viewport.)" – Vandalism

Mmhh... interesting! I am going to try both ways, draw a few rectangles on my map, check the differences if any and report back here. – Surgery