Google Maps Infowindow not showing correct data

Question

I have a transit API, and I'm displaying light rail vehicles on a Google Map. I'm able to display the markers, but when I mouseover to display an infowindow, the same lat/long pair is being displayed for all markers. Its like only one set of coordinates for one vehicle is being displayed for all vehicles. I feel like I'm missing something easy here.

<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

You only create one infowindow (you keep overwriting it with the new ones, leaving it containing the information for the last marker). You can fix it with function closure as demonstrated in the answer to Google Maps JS API v3 - Simple Multiple Marker Example.

Another option would be to store the infowindow or its content in a custom member of the marker.

 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 snippet:

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>