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); }

Answer

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

Advertisement

Answer