I have a Google Map (v3) with 20 markers. I have a single InfoBox instance that gets populated with a div that includes the text to fill the box as innerHTML.
I want to be able to click on the infobox and navigate away to a different page, but I can't get the infobox, or the div inside it to respond to a click event.
I've tried adding an event listener, and I've tried adding a domListener, but I can't get either to work.
Here are some snippets from my code
//setting up the infobox
var infobox = new InfoBox({
disableAutoPan: true
,isHidden:false
,pixelOffset: new google.maps.Size(-10, -10)
,closeBoxURL: ""
,pane: "mapPane"
,enableEventPropagation: true
});
//setting up the div
var boxText1 = document.createElement("div");
boxText1.id = "boxText1";
boxText1.className = "labelText";
boxText1.innerHTML = title1;//this is created earlier
//the marker event listener - the marker and coordinates are also set up earlier
google.maps.event.addListener(_marker1, 'click', function() {
infobox.content_ = boxText1;
infobox.position_ = mkLatLng1;
infobox.open(map);
});
//so far everything ok. When the user clicks the marker the infobox pops up - but.....
google.maps.event.addDomListener(boxText1,'click',function(){ alert('clicked!') });//doesn't work
I've tried a variety of other options, but they're all shots in the dark. What's the best way to listen for a click event on an infobox?
Thanks
Problem solved. In the infobox options you have to ensure that you have
pane: "floatPane"
and NOT
pane: "mapPane"
as I had it. Works fine now.
Interestingly the Google Docs say
Set the pane to "mapPane" if the InfoBox is being used as a map label.
What they don't say is that you can't use this option if you want the map label to be clickable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With