Question

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

Answer 1

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.