How to use Viewport from Google Geocoder in Leaflet JS? - google-maps-api-3

Question

I have successfully set up a Leaflet JS map that uses the Google maps geocoder to pan to a geocoded address. But I am also trying to use "map.fitBounds" to get the appropriate zoom level from the Viewport, but it does not seem to be working. The code I am using is:
map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);
map.fitBounds([[results[0].geometry.viewport.southwest.lat(), results[0].geometry.viewport.southwest.lng()],[results[0].geometry.viewport.northeast.lat(), results[0].geometry.viewport.northeast.lng()]]);
See example here: http://chrismccreath.hostzi.com/geocode_test.html
How can I fix it so that it zooms to the appropriate viewport returned by the google maps geocoder result?

Answer 1

There are no properties like results[0].geometry.viewport.southwest/northeast(I guess you were watching at the network-traffic inside the console, but what you see there will not be passed to the callback-function directly). To get the southwest/northeast use the methods getSouthWest() and getNorthEast() of google.maps.LatLngBounds .
results[0].geometry.viewport is a google.maps.LatLngBounds-object, but you can't use it directly in Leaflet.
You must "convert" it to an array or an Leaflet.LatLngBounds-object.
This should work:
map.fitBounds([
[results[0].geometry.viewport.getSouthWest().lat(),
results[0].geometry.viewport.getSouthWest().lng()],
[results[0].geometry.viewport.getNorthEast().lat(),
results[0].geometry.viewport.getNorthEast().lng()]
]);

Answer 2

Thanks for posting the working example. It helped a lot. It didn't work immediately for me however, had to do some tweaking for it to work.
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( {'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0].geometry.viewport) {
map.fitBounds([[results[0].geometry.viewport.getSouthWest().lat(),
results[0].geometry.viewport.getSouthWest().lng()],
[results[0].geometry.viewport.getNorthEast().lat(),
results[0].geometry.viewport.getNorthEast().lng()]]);
map.setZoom(18);
} else if (results[0].geometry.bounds) {
map.fitBounds([[results[0].geometry.bounds.getSouthWest().lat(),
results[0].geometry.bounds.getSouthWest().lng()],
[results[0].geometry.bounds.getNorthEast().lat(),
results[0].geometry.bounds.getNorthEast().lng()]]);
} else { // give up, pick an arbitrary zoom level
map.panTo(results[0].geometry.location);
map.setZoom(15);
}
} else {
$('#result').html('Geocode was not successful for the following reason: ' + status);
}
});
}
Just thought I'd post it if anybody else wasn't able to figure out how to get it to work.
Thanks again!

Answer 3

DrMolle pointed out that leaflet map objects are not Google Maps API v3 objects (in the other question you reference). This works:
map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);
map.fitBounds([[results[0].geometry.viewport.getNorthEast()],
[results[0].geometry.viewport.getSouthWest()]]);
working example
As described in the documentation:
results[].geometry.location is a google.maps.LatLng, which panTo requires as an argument.
results[].geometry.viewport is a google.maps.LatLngBounds, which fitBounds requires as an argument.