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()]
              ]);