google maps v3 добавление информационного окна в круг

Question

Есть ли способ добавить информационное окно в круг, созданный google.maps.Circle

как то так

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

и

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

или, альтернативно, есть способ создать невидимый маркер в центре круга, по которому можно щелкнуть для доступа к информационному окну

Answer 1

вы можете иметь информационное окно для вашего круга наложения. Но вы должны немного изменить свой код.

Во-первых, необходимо установить clickable=true для оверлея круга (в противном случае события щелчка по кругу не обрабатываются).

Затем вы должны изменить код прослушивателя щелчков. Размещение круга в качестве параметра функции open () не имеет никакого эффекта (круг не является правильным видом MVCObject, для объяснения прочитайте документацию по функции InfoWindow .open ()). Для отображения информационного окна вы должны указать его положение - например, положение события щелчка, центр круга, ....

Код тогда

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

или

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

Ответ на ваш комментарий : Вы можете создать трюк с невидимым маркером (просто поместите полностью прозрачное изображение в качестве значка маркера), но я бы предпочел решение с оверлеем Circle.

Answer 2

, чтобы установить информационное окно, в котором была нажата мышь

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