Ich arbeite an einer Webapplikation. Ich habe eine Google Map, in der ich Polygone aus einem Array hinzufüge. Ich durchlaufe dieses Array und füge die Polygone zur Karte hinzu. Ich muss dem Polygonklick auch einen Ereignis-Listener hinzufügen und die Position des Polygons benachrichtigen

Das ist was ich tue

map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
//Loop on the polygonArray
for (var i = 0; i < polygonArray.length; i++) {
    //Add the polygon
    var p = new google.maps.Polygon({
        paths: polygonArray[i],
        strokeWeight: 0,
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        indexID: i
    });
    p.setMap(map);

    //Add the click listener
    google.maps.event.addListener(p, 'click', function (event) {
        //alert the index of the polygon
        alert(p.indexID);
    });
}

Problem

Die Polygone werden alle korrekt gezeichnet. Das Problem ist jedoch, dass beim Versuch, auf ein Polygon zu klicken, immer der letzte Index angezeigt wird. Es ist, als würde man nur auf das zuletzt hinzugefügte Polygon klicken. Ich denke, wenn ich einen neuen Listener hinzufüge, überschreibt er den alten. Wie kann ich für jedes hinzugefügte Polygon einen Listener hinzufügen, um den richtigen Index zu ermitteln?

Vielen Dank