3

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?

user1836786
  • 45
  • 1
  • 3

3 Answers3

5

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()]
              ]);
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
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!

ישו אוהב אותך
  • 28,609
  • 11
  • 78
  • 96
marchWest
  • 375
  • 1
  • 8
1

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:

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Hi, Thanks for the answer. The panTo in my example works without an error (I copied that from the answer to this question - http://stackoverflow.com/questions/12773542/combining-google-maps-geocoder-and-leaflet-map-receiving-error-invalid-latlng-o ), but, right enough, there is an error in the console for the fitBounds line - "Uncaught TypeError: Cannot call method 'lat' of undefined". Unfortunately your suggestion does not seem to work either, and I get the same error in the console. – user1836786 Jan 03 '13 at 18:13
  • Your link doesn't work for me (it gives: Network Error (tcp_error), A communication error occurred: "Operation timed out" The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time). It is conceivable that the particular result you are using doesn't contain a suggested viewport, see my updated answer. – geocodezip Jan 03 '13 at 18:27
  • Thanks for the updated suggestion. It still fails to work (I get the same console error), I guess because of a difference in how the Leaflet and Google APIs use panTo and fitBounds? – user1836786 Jan 03 '13 at 18:55
  • DrMolle pointed out that leaflet map objects are not Google Maps API v3 objects (in the other question you reference). See the updated answer and working example. – geocodezip Jan 03 '13 at 20:32
  • The example still doesn't work, Leaflet doesn't accept `google.maps.LatLng`-objects, as returned by `getSouthWest()` and `getNorthEast()` – Dr.Molle Jan 03 '13 at 20:41
  • What browser? I tested it in IE (fixed a bunch of "hanging commas") and Firefox. – geocodezip Jan 03 '13 at 21:21
  • Leaflet [L.LatLng](http://leafletjs.com/reference.html#latlng) and [L.LatLngBounds](http://leafletjs.com/reference.html#latlngbounds) look pretty much like their Google Maps API equivalents, but they also take arrays. – geocodezip Jan 03 '13 at 21:33
  • In IE8 and Chrome, the panning would work but not the zooming. Thanks for the tip re commas. – user1836786 Jan 03 '13 at 21:35