Google map: Add click listener to each polygon
It's the normal behavior.There is two solutions that I can think of :
1) I am sure you can find back the polygon from the context (I didn't test it):
google.maps.event.addListener(polygon, 'click', function (event) { alert(this.indexID);});
2) You could also use some closures:
var addListenersOnPolygon = function(polygon) { google.maps.event.addListener(polygon, 'click', function (event) { alert(polygon.indexID); }); }map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);//Loop on the polygonArrayfor (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); addListenersOnPolygon(p);}
Move the code block inside the for-loop.
//Add the click listener google.maps.event.addListener(p, 'click', function (event) { //alert the index of the polygon alert(p.indexID); });
OR
You add this to for-loop,
p.addListener('click', clickSelection);
and do this
function clickSelection(){alert("Clicked");}