Come impostare un popup sugli indicatori con l'API di Google Maps?

Question

Ho questo codice in cui visualizzo e imposto tutti i miei marcatori. Come posso aggiungere un popup con alcune informazioni sui marcatori con questo codice? Aggiungo la variabile "i" sul testo, ma imposta su tutti i popup dei marcatori con "test - 723", dove 723 è l'ultimo valore della variabile "i". Che c'è?

for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(arraylng[i], arraylat[i]) 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
    content: " " 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent('test: ' + i + ''); 
    infowindow.open(map, this); 
    }); 
    markers.push(marker); 
} 

Answer 1

Innanzitutto, modificare la condizione del circuito su i < arraylng.length. In questo momento non sta catturando l'ultimo elemento dell'array.

Le variabili JavaScript funzionano con l'ambito della funzione, quindi è necessario chiamare una funzione per ogni listener di marker per creare i riferimenti di variabile corretti. È possibile utilizzare una funzione anonima, as seen here, o definire una funzione per la creazione di un clic ascoltatore: infoWindows

multiple:

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

Molto probabilmente non si vuole più di un InfoWindow aperto allo stesso tempo, a causa è fastidioso dover cliccare sulla chiusura x. Poi si desidera un solo oggetto InfoWindow, e impostare il contenuto come il marcatore viene cliccato:

singolo InfoWindow:

... 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(arraylng[i], arraylat[i]), 
     map: map 
    }); 

    makeInfoWindowEvent(map, infowindow, "test" + i, marker); 

    markers.push(marker); 
    } 
} 

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 
    }); 
} 

Answer 2

Questo perché la variabile i non viene utilizzato nel ciclo, ma quando il marcatore è cliccato - e poi i è uguale all'ultima index + 1 ... Il addListener è asincrona, non sincrono.

Rimuovere infowindow.setContent('test: ' + i + ''); e sostituire content: " " con content: 'test: ' + i. Questo dovrebbe risolvere il tuo problema.

Answer 3

var marker = new google.maps.Marker({ 
       position: myLatLng, 
       .... 
       content: point[4] 
      }); 
google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.content); 
      infowindow.open(map, this); 
      }); 

codice all'interno del ciclo. Questo ha funzionato perfettamente per me.