2

I'm using Google Maps Geocoder to grab the latitude and longitude of an address. I'm then taking that address and using Leaflet and panning the map to the latitude + longitude coordinates. However, I'm receiving an error from Firebug saying Error: Invalid LatLng object: (-33.8674869, 151.20699020000006, undefined). I know my variable geolocation returns -33.8674869, 151.20699020000006 but not the undefined. What's causing the problem?

 <body onload="initialize()">
  <div id="result"></div>
 <div>
  <input id="address" type="textbox" value="Sydney, NSW">
  <input type="button" value="Geocode" onclick="codeAddress()">
 </div>

 <div id="map"></div>

 <script type="text/javascript">

 var map = L.map('map').setView([33.7489954, -84.3879824], 13);

  var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder();     
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        var geolocation = String(results[0].geometry.location);

        var geolocation = geolocation.replace('(','');

        var geolocation = geolocation.replace(')','');      

        map.panTo([geolocation]);

      } else {
        $('#result').html('Geocode was not successful for the following reason: ' + status);
      }
    });
  };

L.tileLayer('http://{s}.tile.cloudmade.com/apikeyputhere/997/256/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

</script> 
thank_you
  • 11,001
  • 19
  • 101
  • 185

1 Answers1

5

Replace this:

    var geolocation = String(results[0].geometry.location);

    var geolocation = geolocation.replace('(','');

    var geolocation = geolocation.replace(')','');      

    map.panTo([geolocation]);

with that:

map.panTo([results[0].geometry.location.lat(),results[0].geometry.location.lng()]);

Explanation:
You assign a string to the first array-value, it's the same as:

geolocation=new Array('-33.8674869, 151.20699020000006')//contains 1 string

The string will not be evaluated, it will remain 1 string, but you need an array with 2 floats:

geolocation=new Array(-33.8674869, 151.20699020000006)//contains 2 floats

The undefined is the missing 2nd item of the array provided to panTo()

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Amazing. Simple explanation and an answer that minimizes four lines of code into one. Thanks so much. – thank_you Oct 07 '12 at 23:49
  • The documentation for [map.panTo](https://developers.google.com/maps/documentation/javascript/reference#Map) specifies a [google.maps.LatLng](https://developers.google.com/maps/documentation/javascript/reference#LatLng) for its argument. If an array works, you are just lucky (it shouldn't work). The geocoder result results[0].geometry.location is already a google.maps.LatLng, you can pass it directly to panTo. – geocodezip Jan 03 '13 at 18:40
  • @geocodezip: It's not a `google.maps.Map`-object , it's a `Leaflet.map`-object , where `panTo()` accepts an array as argument. – Dr.Molle Jan 03 '13 at 19:09