Google Map info fenêtre afficher le résultat précédent geo au lieu du résultat actuel

Question

quelqu'un peut-il m'aider avec cette jolie s'il vous plaît? Je ne sais pas ce qui s'est mal passé avec mes codes, je veux afficher l'adresse de localisation dans la fenêtre d'info mais à chaque fois qu'elle affiche le résultat précédent au lieu du précédent. Par exemple, lorsque je clique d'abord sur un emplacement, il ajoute un marqueur, mais l'adresse affichée est indéfinie (ce qui est le résultat précédent). Ensuite, je clique sur un autre endroit où il affiche l'adresse du premier. Comment puis-je résoudre ce problème pour afficher l'adresse de l'emplacement actuel en cours de marquage? S'il vous plaît. Merci beaucoup. ci-dessous est mon code ..

var map; 
var marker; 
var markersArray = []; 

var infoWindow; 
var buffer; 

var geocoder, regeocoder; 

function initialize() { 

window.onunload = google.maps.Unload; 

// Creating an option object for the map 

    var myOptions = { 
      zoom: 16, 
      center:COUNTRY, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

// Initializing the map 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

// Add onClick event to the map 

    google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng, true); }); 
} 

function placeMarker(location, flag) { 

// Get clicked location <Latitude, Longtitude> 

var clickedLocation = location; 

    if (markersArray) { 
     for (i in markersArray) { 
       markersArray[i].setMap(null); 
     } 
     markersArray.length = 0; 
    } 

    // Create a new marker 

    marker = new google.maps.Marker({ 
     position: clickedLocation, 
      map: map, 
      icon: 'image/blue-dot.png', 
      title: "Select this location", 
      clickable: true 
    }); 

    if (flag == true) { 

     // Start reverse Geocode 

     regeocoder = new google.maps.Geocoder(); 

     if (regeocoder) { 
       regeocoder.geocode({'latLng': clickedLocation, 'region': region}, function(results, status){ 

       if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0]) { buffer = results[0].formatted_address; } 
       } 
      else { } 
       }); 
     } 

    setHiddenValue(buffer); 

    setMarkerInfo(buffer, clickedLocation); 

    } 

    // Attach mouseover event to a marker that will trigger the markerInfo 

    google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map,marker); }); 

    // Attach mouseout event to the marker that will delete the markerInfo 

    google.maps.event.addListener(marker, 'mouseout', function() { if (infowindow) infowindow.close(); }); 

    markersArray.push(marker); 

    map.setCenter(clickedLocation); 
} 


function setMarkerInfo(title, textbody) { 

    // Initialize the contentString 

    var contentString = '<div id="content">'+'<div id="siteNotice">'+'</div>'+ 
    '<br/><h3 id="firstHeading" class="firstHeading">' + title + '</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p>Map Coordinates: <br/>' + textbody + '</p>'+ 
    '</div>'+ 
    '</div>'; 

    infowindow = new google.maps.InfoWindow({ content: contentString }); 
    infosArray.push(infowindow); 
} 

function setHiddenValue(data) { 
    var hiddenVal = document.getElementById('getLoc'); 
    if (hiddenVal) { hiddenVal.value = data; } 
} 

function searchMap(info) { 

var address = info; 
var loc; 
var addr; 

    geocoder = new google.maps.Geocoder(); 

    if (geocoder) { 
      geocoder.geocode({'address': address, 'region': region}, function(sresults, sstatus){ 
       if (sstatus == google.maps.GeocoderStatus.OK) { 

        if (sresults[0]) { 

        loc = sresults[0].geometry.location; 

        geocoder.geocode({'latLng': loc}, function(results, status){ 
          if (status == google.maps.GeocoderStatus.OK) { 
          if (results[0]) { addr = results[0].formatted_address; } 
          } 
         else { alert("No Matching Results"); } 
         }); 

       } 

      }else { alert("No Matching Results"); } 

      }); 
    } 

    if (geocoder) { 
      geocoder.geocode({'address': address, 'region': region}, function(sresults, sstatus){ 
       if (sstatus == google.maps.GeocoderStatus.OK) { 

        if (sresults[0]) { 

        loc = sresults[0].geometry.location; 

        geocoder.geocode({'latLng': loc}, function(results, status){ 
          if (status == google.maps.GeocoderStatus.OK) { 
          if (results[0]) { addr = results[0].formatted_address; } 
          } 
         else { alert("No Matching Results"); } 
         }); 

       } 

      }else { alert("No Matching Results"); } 

      }); 
    } 

    setHiddenValue(addr); 

    setMarkerInfo(addr, loc); 

    placeMarker(loc, false); 

} 

Answer 1

Votre problème est lié au fait que l'information d'adresse arrive de façon asynchrone, en conséquence vous exécutez tout le code avant d'obtenir l'adresse formatée par rapport à:

geocoder.geocode({'latLng': loc}, function(results, status){ 
          if (status == google.maps.GeocoderStatus.OK) { 
           if (results[0]) { addr = results[0].formatted_address; } 
          } 
          else { alert("No Matching Results"); } 
       }); 

I suggère de relier le tout en un appel de fonction combinée:

google.maps.event.addListener(marker, 'mouseover', function() { 

et au lieu de:

infowindow.open(map,marker); }); 

vous appelez:

new google.maps.InfoWindow({ content: 

et au lieu de:

contentString }); 

vous appelez:

geocoder.geocode({'latLng': loc}, function(results, status){ 
    if (status == google.maps.GeocoderStatus.OK) { 
     if (results[0]) { addr = results[0].formatted_address; } 
    } else { 
     * alert("No Matching Results"); */ 
    } 
}); 

et obtenez ici le résultat formaté sous la forme css vous désirez et retournez comme un string. Ainsi, chaque fois que vous passez votre marqueur, vous interrogez l'adresse relative et créez l'infowindow à la volée.

Espérons que ça aide.