Google Maps Marker, der über Infowindow iteriert

Question

Okay, also mit dem Code unten kann ich nicht herausfinden, warum, wenn die Karte und die Markierungen generiert werden, ich nur klicken und den letzten erzeugten Marker sehen kann? Irgendwelche Ideen zur Umsetzung? Dank

<script> 
    function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: uluru 
    }); 

     {% for i in locations %} 
     { 
     var stuff = "{{ i.Name }}" 
     var marker = new google.maps.Marker({ 
      position: { {{ i.Loc }} }, 
      clickable: true, 
      label: "{{ i.Name }}", 
      animation: google.maps.Animation.DROP, 
      map: map 
     }); 
     } 
     {% endfor %} 
     var infowindow = new google.maps.InfoWindow({ 
      content: stuff 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

    } 
    </script> 

Answer 1

So ist der Code, den Sie suchen sind, ist marker.setMap(null).

Um dies zu implementieren, müssen Sie beim Laden der Seite ein globales markers Array erstellen.

window.markers = [] 

Dann (in der init-Funktion) schieben Sie Ihren Marker in diesem Array, so dass Sie es später verweisen können.

var marker = new google.maps.Marker({ 
    ...your code... 
}); 
markers.push(marker); 

Dann in Ihrem click Zuhörer Sie wird darüber hinweg Schleife wollen und Google Maps sagen jeden zu entfernen:

for (var i = 0, marker; (marker = markers[i]); i++) marker.setMap(null); 

Dann natürlich Sie eine new google.maps.Marker aus Ihrem click machen wollen werde Hörer.

Wenn Sie Ihren Code in einen CodePen werfen, könnte ich Ihnen helfen, dies zu implementieren.