javascriptgoogle-mapsgoogle-maps-api-3leafletcloudmade

Combining Google Maps Geocoder and Leaflet Map Receiving Error: Invalid LatLng object

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>
Solution

  • 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()