Google Maps Infowindow zeigt keine korrekten Daten

Question

Ich habe eine Transit-API, und ich zeige Stadtbahnfahrzeuge auf einer Google Map. Ich kann die Marker anzeigen, aber wenn ich mit dem Mauszeiger über ein Infofenster blicke, wird für alle Marker das gleiche Breiten-/Längenpaar angezeigt. Für alle Fahrzeuge wird nur ein Koordinatensatz für ein Fahrzeug angezeigt. Ich fühle mich, als würde ich hier etwas leicht übersehen.

<script>                      
    var map;                     

    var infoWindow;                   

    function initMap() {                  
    map = new google.maps.Map(document.getElementById('map'), {        
     center: {lat: 45.5231, lng: -122.6765},            
     zoom: 11                    
    });                      

    {% for vehicle in vehicles %}               
    var marker = new google.maps.Marker({             
     position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},     
     map: map                    

    });                      
    infowindow = new google.maps.InfoWindow({            
    content: "Position: "+String({{ vehicle.latitude }})+String({{ vehicle.longitude}})  
    });                      
    marker.addListener('mouseover', function() {            
     infowindow.open(map, this);               
    });                      
    marker.addListener('mouseout', function() {            
     infowindow.close();                 
    });                      
    {% endfor %}                    
    }                       
</script> 

Answer 1

Sie erstellen nur ein Infofenster (halten Sie es mit den neuen überschrieben wird, so dass es die Informationen für den letzten Marker enthält). Sie können es mit Funktionsschließung beheben, wie in der Antwort auf Google Maps JS API v3 - Simple Multiple Marker Example gezeigt.

Eine andere Option wäre, das Infowindow oder seinen Inhalt in einem benutzerdefinierten Element des Markers zu speichern.

var marker = new google.maps.Marker({             
    position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},     
    map: map, 
    content: "Position: "+String({{ vehicle.latitude }})+String({{ vehicle.longitude}})                    
    });   
    marker.addListener('mouseover', function() {    
     infowindow.setContent(this.content);        
     infowindow.open(map, this);               
    });   

Code-Schnipsel:

var map; 
 
var infoWindow; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 42, 
 
     lng: -72 
 
    }, 
 
    zoom: 10 
 
    }); 
 
    infowindow = new google.maps.InfoWindow({}); 
 
    // {% for vehicle in vehicles %}               
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 42, 
 
     lng: -72 
 
    }, 
 
    map: map, 
 
    content: "Position: " + 42 + "," + -72 
 
    }); 
 

 
    marker.addListener('mouseover', function() { 
 
    infowindow.setContent(this.content); 
 
    infowindow.open(map, this); 
 
    }); 
 
    marker.addListener('mouseout', function() { 
 
    infowindow.close(); 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 42.1, 
 
     lng: -72.1 
 
    }, 
 
    map: map, 
 
    content: "Position: " + 42.1 + "," + -72.1 
 
    }); 
 

 
    marker.addListener('mouseover', function() { 
 
    infowindow.setContent(this.content); 
 
    infowindow.open(map, this); 
 
    }); 
 
    marker.addListener('mouseout', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>