Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps v3 InfoBox Add Event Listener

Tags:

google-maps

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

like image 538
Phil John Avatar asked Jun 27 '11 14:06

Phil John


1 Answers

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.

like image 130
Phil John Avatar answered Dec 08 '22 21:12

Phil John