Why doesn't google maps api work with dynamic lat/long?

Question

I need to place a custom marker on a map based on the address set by the user in CMS. By using that address I'd like to get lat/long for that area and, by using google maps api, place it on the correct spot. Here's my code:

  function getLatLong(address, callback){
    var geo = new google.maps.Geocoder;

    geo.geocode({'address':address},function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        callback (results[0].geometry.location.k + ',' + results[0].geometry.location.D);
      } else {
        return;
      }

    });
  }

  $(document).ready(function(){
    getLatLong("<?= $r['address'] ?>", function(addr){ 
      console.log(addr);
      function initialize() {
        var mapOptions = {
          zoom: 15,
          scrollwheel: false,
          center: new google.maps.LatLng(addr)
        }
        var map = new google.maps.Map(document.getElementById('footer-map'),
                                      mapOptions);

        var image = '<?= parseLink("images/map-marker.png") ?>';
        var myLatLng = new google.maps.LatLng(addr);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });

        console.log('loaded');
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    })
  });

So it returns console.log(addr) with the lat/long and if I copy that value in center: new google.maps.LatLng(addr) in stead of addr , everything works, but if I leave the addr there, it just doesn't load the map.

What am I doing wrong?

Answer 1

1. There is no need to use results[0].geometry.location.k + ',' + results[0].geometry.location.D because results[0].geometry.location is itself a LatLng object

2. Here is the complete code that works:

<script>

    function getLatLong(address, callback){
        var geo = new google.maps.Geocoder;

        geo.geocode({'address':address},function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results[0].geometry.location);
                callback(results[0].geometry.location);} else{return;} });}


    $(document).ready(function(){
        getLatLong("indore", function(addr){ 
            console.log(addr);
            var mapOptions = {
                zoom: 4,
                center: addr
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

            var myLatLng = addr;//new google.maps.LatLng(addr);
            var beachMarker = new google.maps.Marker({
                position: myLatLng,
                map: map
            });

            console.log('loaded');})

    });</script></head>

3. I have removed that "<?= $r['address'] ?>" and marker image, please add it back again