google maps v3 adding an info window to a circle

Question

Is there a way to add a infoWindow to a circle created by google.maps.Circle

something like this

var circ = new google.maps.Circle({
            cen         


        

Answer 1

you can have info window for your circle overlay. But you have to slightly adjust your code.

First, it is necessary to set clickable=true for your Circle overlay (otherwise click events on the circle are not processed).

Then you have to change the code of the click listener. Putting circle as a parameter to function open() has no effect (Circle is not the proper kind of MVCObject, for explanation read documentation of InfoWindow.open() function). To display the info window you have to provide its position - e.g. position of the click event, center of the circle, ....

The code is then

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng);
    infoWindow.open(map);
});

or

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(circ.getCenter());
    infoWindow.open(map);
});

Answer to your comment: You can create a trick with an invisible marker (just put fully transparent image as the marker icon), but I would prefer solution with Circle overlay.

Answer 2

to set info window at where mouse clicked

google.maps.event.addListener(circ, 'click', function(ev){
    infoWindow.setPosition(ev.latLng); //<-- ev matches what you put ^ (mouse event)
    infoWindow.open(map);
});