I am having trouble adding an info window to each one of multiple circle overlays.
When I click on a circle an info window appears, but not on the circle I clicked but rather on the last circle added. It seems that each time the loop executes the event listener is added to every circle but the content of the info window is derived from the last circle added.
for (i in cityPoints) {
var magnitudeOptions = {
map: map,
center: cityPoints[i].center,
radius: cityPoints[i].magnitude,
id:cityPoints[i].id,
addr:cityPoints[i].addr,
infoWindowIndex: i
};
cityCircle = new google.maps.Circle(magnitudeOptions);
circlesArray.push(cityCircle);
infoWindow = new google.maps.InfoWindow({ content: cityPoints[i].id + " " + cityPoints[i].addr });
infoWindowsArray.push(infoWindow);
google.maps.event.addListener(circlesArray[i], 'click', function (ev) {
infoWindowsArray[i].setPosition(cityPoints[i].center);
infoWindowsArray[i].open(map);
});
}
That's because the i parameter you pass is the last, always.
Try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
#map-canvas {
height: 500px;
width: 500px;
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
cityPoints[1] = {
center: new google.maps.LatLng(40.714352, -74.005973),
id: 1,
addr: 'avenue1',
magnitude: 100000
};
cityPoints[2] = {
center: new google.maps.LatLng(34.052234, -118.243684),
id: 2,
addr: 'avenue2',
magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i in cityPoints) {
var magnitudeOptions = {
map: map,
center: cityPoints[i].center,
radius: cityPoints[i].magnitude,
id:cityPoints[i].id,
addr:cityPoints[i].addr,
infoWindowIndex: i
};
cityCircle = new google.maps.Circle(magnitudeOptions);
google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
return function() {
infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
}
})(cityCircle, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
This is called closure, and google has information about how to do it with markers. Below is how to do it with circles.
In the code, "locations" is an array containing all of the latitudes and longitudes that I want to plot as circles.
for (i = 0; i < locations.length; i++) {
currentLocation = locations[i].latlng;
var currentLatLng = new google.maps.LatLng(parseFloat(currentLocation[0]),parseFloat(currentLocation[1]) )
var newCircle = new google.maps.Circle({
center: currentLatLng,
radius:10000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4,
map:map,
clickable:true,
});
attachSecretMessage(locations[i].instname+', Tuition: $'+locations[i].tuitionfee02_tf)
}
function attachSecretMessage(tuitionInfo){
var infowindow = new google.maps.InfoWindow({
content: tuitionInfo,
position: currentLatLng
});
myCity.addListener('click', function() {
infowindow.open(map);
});
}
