API Google Maps InfoWindow liée au dernier marqueur

Question

J'essaie d'ajouter une fenêtre d'information à chaque marqueur que je mets sur la carte. La fenêtre d'information n'affiche que le dernier marqueur ajouté. J'ai essayé les autres solutions ici mais aucune n'a fonctionné. Actuellement, je fais cela avec le code suivant:

(code incriminé commence à mi-chemin au commentaire // EN COURS)

function placeMarker(data, map){ 
 
var lati, lngi, title, details; 
 
var image = 'image.png'; 
 

 
    for(i=0; i < data.length; i++){ 
 
    console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType); 
 
    if(data[i].eventName != ""){ 
 
     title = data[i].eventName; 
 
    } 
 
    if(data[i].eventDetails != ""){ 
 
     details = data[i].eventDetails; 
 
    } 
 

 
     if(data[i].eventLocation == "Location 1"){ 
 
     lati = -29.651409; 
 
     lngi = 82.342909; 
 
     } 
 
     else if(data[i].eventLocation == "Location 2"){ 
 
     lati = -29.637712; 
 
     lngi = 82.368024; 
 
     } 
 
     else if(data[i].eventLocation == "Location 3"){ 
 
     lati = -29.650533; 
 
     lngi = 82.342684; 
 
     } 
 
     else{ 
 
     lati = -29.645793; 
 
     lngi = 82.347717; 
 
     console.log(data[i].eventLocation + " not found"); 
 
     } 
 
     // WORK IN PROGRESS 
 
     var infowindow = new google.maps.InfoWindow({ 
 
      content: details 
 
     }); 
 

 
     newMarker = new google.maps.Marker({ 
 
     position: {lat: lati, lng: lngi}, 
 
     title : title, 
 
     map: map, 
 
     icon: image, 
 
     details: details 
 
     }); 
 

 
     newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, newMarker); 
 
     }); 
 
    } 
 
} 
 

 
function initMap(data) { 
 
    var uluru = {lat: -29.643220, lng: 82.350427}; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 14, 
 
    center: uluru 
 
    }); 
 
// Marker Images 
 
    var centerMarker = new google.maps.Marker({ 
 
    position: {lat: -29.643894, lng: 82.354748}, 
 
    map: map, 
 
    icon: image3 
 
    }); 
 
    placeMarker(data, map); 
 
}

Essayer de trouver une solution m'a permis d'afficher les dernières informations saisies sur chaque marqueur, mais pas les informations correctes pour le marqueur correspondant. J'ai changé cela à ceci:

newMarker.addListener('click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, newMarker); 
 
     });

google.maps.event.addListener(newMarker, 'click', function() { //needs some work to connect to each marker instead of last one placed 
 
      infowindow.open(map, this); 
 
     });

Answer 1

essayer ma modification .. Je ne peux pas déboguer votre fin, mais laissez-moi savoir si cela fonctionne ... sinon, je suppose que vous aidera à voir la manière que je l'utilise pour itérer la boucle, puis remplir un tableau vide avec toutes les infos marqueur, etc détails et joindre cet événement aux cartes ..

var infoWindow = new google.maps.InfoWindow; 
    // open info window 
    var onMarkerClick = function() { 
    var marker = this; 
    infoWindow.setContent(marker.details); 
    infoWindow.open(map, marker); 
    mkmap.lastmarkeropened = marker; 
    }; 
    // close the info window 
    google.maps.event.addListener(map, 'click', function() { 
    infoWindow.close(); 
    }); 

    var marker = [] ; 
    // loop start 
    for(i=0; i < data.length; i++){ 
    console.log(data[i].eventLocation + " OF TYPE " + data[i].eventType); 
    if(data[i].eventName != ""){ 
     title = data[i].eventName; 
    } 
    if(data[i].eventDetails != ""){ 
     details = data[i].eventDetails; 
    } 

     if(data[i].eventLocation == "Location 1"){ 
     lati = -29.651409; 
     lngi = 82.342909; 
     } 
     else if(data[i].eventLocation == "Location 2"){ 
     lati = -29.637712; 
     lngi = 82.368024; 
     } 
     else if(data[i].eventLocation == "Location 3"){ 
     lati = -29.650533; 
     lngi = 82.342684; 
     } 
     else{ 
     lati = -29.645793; 
     lngi = 82.347717; 
     console.log(data[i].eventLocation + " not found"); 
     } 

     marker[ i ] = new google.maps.Marker({ 
     position: {lat: lati, lng: lngi}, 
     title : title, 
     map: map, 
     icon: image, 
     details: details 
     }); 

     // attach event to open info window 
     google.maps.event.addListener(marker[ i ], 'click', onMarkerClick); 
    } // end loop 

voir si cela fonctionne ..

acclamations, K

Answer 2

Essayez de placer cette façon, la définition de cette fonction avant votre boucle:

var assignListener = function(markerObj, infoWindowObj){ 
         return function() { 
           infoWindowObj.open(map, markerObj); 
           }; 
         }; 

Ensuite, ajoutez les auditeurs via cette fonction:

newMarker.addListener('click', assignListener(newMarker, infowindow));