Jak utworzyć InfoWindows dla wielu znaczników w pętli For?

Question

Mam następujący kod i poprawnie tworzy wszystkie znaczniki, które przechowuję, ale potem, gdy klikam na którymkolwiek z nich, tylko ostatnie InfoWindow jest tworzone i pojawia się tylko nad ostatni znacznik, niezależnie od tego, który znacznik kliknę. Mogę sobie wyobrazić, że ma to coś wspólnego z tą samą zmienną, która jest używana w pętli for.

{% for record in records %} 

//need to do the JSON encoding because JavaScript can't have Jinja2 variables 
//I need the safe here because Jinja2 tries to escape the characters otherwise 
var GPSlocation = {{record.GPSlocation|json_encode|safe}}; 
var LatLng = GPSlocation.replace("(", "").replace(")", "").split(", ") 
var Lat = parseFloat(LatLng[0]); 
var Lng = parseFloat(LatLng[1]); 

var markerLatlng = new google.maps.LatLng(Lat, Lng); 

var marker = new google.maps.Marker({ 
    position: markerLatlng, 
    title: {{record.title|json_encode|safe}} 
}); 

var infowindow = new google.maps.InfoWindow({ 
    content: "holding..." 
    }); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent({{record.description|json_encode|safe}}); 
    infowindow.open(map, marker); 
    }); 

//add the marker to the map 
marker.setMap(map); 

{% endfor %} 

Próbowałem zmieniając detektor zdarzeń do tego:

google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent({{record.description|json_encode|safe}}); 
     infowindow.open(map, this); 
     }); 

Ponieważ widziałem, że pracował dla innych użytkowników na SO, ale potem nie ma InfoWindows pokazać. Czy są tu jakieś oczywiste błędy?

Answer 1

Musisz utworzyć znaczniki w osobnej funkcji:

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

a następnie wewnątrz pętli:

var markerLatlng = new google.maps.LatLng(Lat, Lng); 
    var title = {{record.title|json_encode|safe}} 
    var iwContent = {{record.description|json_encode|safe}} 
    createMarker(markerLatlng ,title,iwContent); 

Wreszcie:

function createMarker(latlon,title,iwContent) { 
     var marker = new google.maps.Marker({ 
      position: latlon, 
      title: title, 
      map: map 
    }); 


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

    } 

Explanation here.