javascriptjquerygoogle-maps-api-3google-geocoder

InfoWindow & GeoCoder


I have an issue with getting longitude and latitude values geocoded and then display the relevant address in an info window. I have tried multiple ways without success, however I must admit that I am not so familiar with javascript. I am continuously getting back as value : "undefined".

Here is a snippet of my code showing the main components:

var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var geocoder = new google.maps.Geocoder(); var address;

if (geocoder) {
    geocoder.geocode({ 'latLng': position }, function (results, status) {       
       if (status == google.maps.GeocoderStatus.OK) {
            address = (results[0].formatted_address);
       } else { 
            address = (position.coords.latitude + ', ' +  position.coords.longitude);
       }           
    }); 
}

var info = 
          ('<span class="txt_bld">Location:</span> '         + address                      + '<br />' +
          '<span class="txt_bld">Accuracy:</span> '          + position.coords.accuracy     + '<br />' +
          '<span class="txt_bld">Time:</span> '              +  position.timestamp);

Can anyone tell me how I can translate the lat/lng in position to an address in order to show them in my infowindow?

EDIT

Updated Code:
var position = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); var geocoder = new google.maps.Geocoder(); var infowindow = new google.maps.InfoWindow(); var address;

if (geocoder) {
    geocoder.geocode({ 'latLng': position }, function (results, status) {       
       if (status == google.maps.GeocoderStatus.OK) {
            address == (results[0].formatted_address);
       } else { 
            address == (position.coords.latitude + ', ' +  position.coords.longitude);
       }    
       var info = 
          ('<span class="txt_bld">Location:</span> '         + address                      + '<br />' +
          '<span class="txt_bld">Accuracy:</span> '          + position.coords.accuracy     + '<br />' +
          '<span class="txt_bld">Time:</span> '              + position.timestamp); 

        if(!infowindow){
            infowindow = new google.maps.InfoWindow({
                content: info
            });
        }else{
            infowindow.setContent(info);
        }

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);    
          setTimeout(function () { 
            infowindow.close(); 
          }, 5000);
        });            
    }); 
}

if(!marker){ marker = new google.maps.Marker({ position: position, map: this.map, icon: markericon, draggable:false }); }else{ marker.setPosition(point);
}


Solution

  • The geocoder is asynchronous. You need to use the data it returns in the callback function. Something like this (not tested):

    var position = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();
    var address;
    
    if (geocoder) {
      geocoder.geocode({ 'latLng': position }, function (results, status) {       
       if (status == google.maps.GeocoderStatus.OK) {
            address = (results[0].formatted_address);
       } else { 
            address = (position.coords.latitude + ', ' +  position.coords.longitude);
       }           
       var info = 
          ('<span class="txt_bld">Location:</span> '         + address
           + '<br />' +
          '<span class="txt_bld">Accuracy:</span> '          + position.coords.accuracy
          + '<br />' +
          '<span class="txt_bld">Time:</span> '              +  position.timestamp);
        infowindow.setContent(info);
        infowindow.setPosition(position);
        infowindow.open(map);
      }); 
    }
    

    Working example