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({
            center:latlng,
            clickable:false,
            fillColor:colors[count],
            fillOpacity:0.3, 
            map:map,
            radius:radius,
            strokeColor:colors[count],
            strokeOpacity:0.3});

and

//create info window
var infoWindow= new google.maps.InfoWindow({
    content: "Your info here"
    });

//add a click event to the circle
google.maps.event.addListener(circ, 'click', function(){
//call  the infoWindow
infoWindow.open(map, circ);
});

or alternatively is there a way to create an invisible marker at the center of the circle that can be clicked on to access an infoWindow

or alternatively is there a way to create an invisible marker at the center of the circle that can be clicked on to access an infoWindow — trs, Jul 05 '11 at 14:36

score 45 · Accepted Answer · answered Jul 05 '11 at 15:51

45

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.

answered Jul 05 '11 at 15:51

Tomik

23,857
8
121
100

what does ev represent? and is there a way to an indicator to the user to click the circle like the "title" option in a marker – trs Jul 05 '11 at 16:07
ev is MouseEvent (http://code.google.com/apis/maps/documentation/javascript/reference.html#MouseEvent). Circle overlay doesn't have any textual indicator. But when clickable is true the cursor changes when it's positioned over the circle. Creating textual indicator is not that simple - I would do such thing with custom overlay and circle's mouseover event listener. – Tomik Jul 05 '11 at 16:45
I have tried this method but it did not work. I receive the click event but I cannot open the infoWindow! do you have any other hint? – Future2020 Apr 13 '12 at 17:08
Just to say that if you're generating circles in a loop then instead of "infoWindow.setPosition(circ.getCenter());" you should use "infoWindow.setPosition(this.getCenter());". Otherwise you're info window will always pop up by the last circle in the loop. – Richard Williams Apr 24 '14 at 10:52
its only works on last lat lang of circle for me.i have an array of lat lang and generate few circle.how can i determine each circle's content ? – zira Sep 01 '15 at 08:32
update:i hv found the solution at http://stackoverflow.com/questions/16538075/adding-info-windows-to-multiple-circle-overlays. =) – zira Sep 02 '15 at 02:16

score 2 · Answer 2 · answered Jan 08 '16 at 15:09

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);
});

answered Jan 08 '16 at 15:09

Doug

117
1
7

score 0 · Answer 3 · answered Nov 27 '22 at 15:31

I got same confusion. I simply solved it using

const circle = new google.maps.Circle({ strokeColor: "#FFFF00", strokeOpacity: 0.8, strokeWeight: 1, fillColor: "#FFFF00", fillOpacity: 0.4, center: position, // { lat: 46.021667, lng: 11.124717 } radius: distance, map: map,

    });

    const info = "Radius: " + circle.getRadius() + "m";
    const iw = new google.maps.InfoWindow({
        content: info,
        position: position,
    });
    circle.addListener("mouseover", () => {
        iw.open({
            map,
        });
    });
    circle.addListener("mouseout", () => {
        iw.close();
    });
    circle.addListener("click", () => {
        circle.setMap(null);
    });

google maps v3 adding an info window to a circle

3 Answers3

Linked