Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API - google-maps-api-3

Question

I am having problems using Google Map API.
I want to plot circles on the map and create mouseover event on each circle to open an infowindow displaying the time value.
First problem is the infowindow content does not change for different circles.
Second problem is infowindow does not pop up for some reason.
Can someone help please?
Thanks
Codes are as followings:
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
// Construct the circle for each value in citymap. We scale population by 20.
//movingColour=ColorLuminance(movingColour, -0.005) ;
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
var infowindow =new google.maps.InfoWindow({
content: data[city].time
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
alert(infowindow.content);
infowindow.open(map,circle);
});
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}

Answer 1

This is a common problem usually seen with InfoWindows on markers and can be solved a number of ways. The InfoWindow isn't opening because the optional second parameter of .open can only be a marker, without that, you need to set the position at which the marker should open. I usually use function closure to solve the InfoWindow content problem (there are other ways):
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
createClickableCircle(map, circle, data[city].time);
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
function createClickableCircle(map, circle, info){
var infowindow =new google.maps.InfoWindow({
content: info
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
// alert(infowindow.content);
infowindow.setPosition(circle.getCenter());
infowindow.open(map);
});
}
(you probably want to add a listener to close the InfoWindow.)

Answer 2

I rewrite a bit of your javascript to have better syntax and named variables which you had forgotten to define with var.
For example to define data={}; use var data=[]; since I can see below that you use it as an array containing objects. I also made a fix which stops flickering effect when you are moving your cursor over circles which has infowindow already opened:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
Other enhancements includes defining few of your variables as global above your initialize(); method, cheers.
Check out working fiddle with comments.