google maps v3 adding an info window to a circle

Is there a way to add a infoWindow to a开发者_C百科 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

---

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.

---

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

---

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