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)
}
Right. After trying both methods and testing, it comes out that:
geometry.bounds
object is "optionnaly returned" as the doc saysgeometry.bounds
object is based ongeometry.bounds
"may not match the recommended viewport" and often doesn'tgeometry.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);