Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API

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.

Answer 1

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.

Answer 2

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.)