I have this block of code inside a loop:
var points = [new google.maps.LatLng(lat1, lon1),
new google.maps.LatLng(lat2, lon1),
new google.maps.LatLng(lat2, lon2),
new google.maps.LatLng(lat1, lon2),
new google.maps.LatLng(lat1, lon1)
];
bounds.extend(new google.maps.LatLng(lat1, lon1));
bounds.extend(new google.maps.LatLng(lat2, lon1));
bounds.extend(new google.maps.LatLng(lat2, lon2));
bounds.extend(new google.maps.LatLng(lat1, lon2));
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: "#f33f00",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#ff0000",
fillOpacity: 0.2
});
var x1 = Math.min(lon1,lon2);
var y1 = Math.min(lat1,lat2);
var x2 = Math.max(lon1,lon2);
var y2 = Math.max(lat1,lat2);
var x = x1 + ((x2 - x1) / 2);
var y = y1 + ((y2 - y1) / 2);
var cp = new google.maps.LatLng(y,x);
var infoWindow = new google.maps.InfoWindow();
infoWindow.setPosition(cp);
infoWindow.setContent(html);
google.maps.event.addListener(polygon, "click", function() {
infoWindow.open(map);
});
polygon.setMap(map);
My problem is when I click each of the polygons, the infowindow opens on the same position for all the polygons.
Any help will be greatly appreciated!