第二次点击后会出现Google地图反向地理编码地址吗？

Question

Currently if I click on a marker, error in console shows "address undefined" but if i click it again the address shows up, why is this happening?

What my listener looks like:

map.data.addListener('click', function(event) {

      var lat = event.latLng.lat(); 
      var lng = event.latLng.lng(); 

      function getReverseGeocodingData() {
      var latlng = new google.maps.LatLng(lat, lng);
      // This is making the Geocode request
      var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
            if (status !== google.maps.GeocoderStatus.OK) {
                alert(status);
            }
            // This is checking to see if the Geoeode Status is OK before proceeding
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results[0].formatted_address);
                address = (results[0].formatted_address);
            }
        });
    }
      getReverseGeocodingData(lat, lng);

      infoWindow.setContent("Address: " + address + "<br>Vehicle: " + event.feature.getProperty('deviceID')+"<br> Speed: "+event.feature.getProperty('speedKPH'));
      infoWindow.setPosition(event.latLng);
      infoWindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
      infoWindow.open(map);

      });

thank you for your time and help in advance.

Answer 1

geocoder.geocode works asynchronously, which means the callback will be invoked later ™. You are calling this method from the synchronous method getReverseGeocodingData , and then proceed to use the address data immediately afterwards.

This can't work.

Asynchronous communication can be visualized with traditional paper mail. Imagine you send a letter to Google to get the address at x,y . After you put the letter in the postbox, you don't have the result just yet, so you can't print that sign with the address on it yet. But you can do other stuff, like repainting your house (yeah, the metaphor is stretched). You will have to be patient to wait for the answer via mail.

A few days later the mailman rings, and delivers you the answer from Mountain View. It says: " x,y is at Hauptstraße 22 ". Now you can start printing that sign (and this is where the metaphor ends) to the status bar of your browser.

On the other hand, you can visualize synchronous communication with phone calls. You get the answer immediately, and you can't do anything else during the call. After you hung up, you got the answer.

In JavaScript, we are pretty much stuck with the asynchronous model. If this is good or bad is not for today to decide ;-)

Answer 2

So thanks thriqon i understood the problem,

and have come up with this solution which i'm not sure how correct it is, but it does what i need it to do. It calls for the address once they hover over the point in the background without popping up the infowindow and when they click, tada, the address is shown in the infowindow! hope this helps some people! messsssy code

 map.data.addListener('mouseover', function(event) {

  var lat = event.latLng.lat(); 
  var lng = event.latLng.lng(); 

   function getReverseGeocodingData(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  // This is making the Geocode request
  var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status !== google.maps.GeocoderStatus.OK) {
            alert(status);
        }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].formatted_address);
           address = (results[0].formatted_address);
           return address;
        } 
    });
}
  getReverseGeocodingData(lat, lng);

  map.data.addListener('click', function(event) {

  infoWindow.setContent("Address: " + address + "<br>Vehicle: " + event.feature.getProperty('deviceID') +"<br> Speed: "+event.feature.getProperty('speedKPH')+"<br> Heading:"+event.feature.getProperty('heading'));
  infoWindow.setPosition(event.latLng);
  infoWindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
  infoWindow.open(map);

  });

});