Failed to add event to Google Infobox map.

Question

I am using Infobox with Google Map V3 (attached image). By clicking on Infobox, I want to go to the details page. But I can’t add a click listener to the info box. Here is the code I'm using:

This is my info box configuration:

var ib = new InfoBox({ alignBottom : true, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size(-125, -50), zIndex: null, closeBoxURL: "", infoBoxClearance: new google.maps.Size(1, 1), isHidden: false, pane: "floatPane", enableEventPropagation:false }); 

And I added a listener to these info boxes as follows:

  google.maps.event.addListener(ib, 'domready', function() { if(Ext.get(ib.div_)){ Ext.get(ib.div_).on('click', function(){ console.log('test on click') }, this); Ext.get(ib.div_).on('mousedown', function(){ console.log('test on click') }, this); } }); 

While enableEventPropagation = false , the event does not apply to the MAP, but no events occur on infoboxes.

As long as enableEventPropagation = true , events (click, mousedown) work, but click on another part of the info box, it takes me to a map or another marker.

Any idea how to solve this?

Answer 1

You need to add the domready event to the infobox eventListener, not google maps' one. Only after the infobox html is on the screen can you bind the event. To prevent the binding of several events, close other info boxes before downloading a new one.

 infobox= new InfoBox(); google.maps.event.addListener(marker, 'click', function() { infobox.close(); infobox= new InfoBox({ ... }); infobox.open(map, this); infobox.addListener("domready", function() { $("#target").on("click", function(e) { /* do something */ }); }); }); 

Answer 2

You can attach a listener to what is the content of your InfoBox.

 var boxText = document.createElement('div'); var myOptions = { content: boxText, ... } var ib = new InfoBox(myOptions); ib.open(theMap, marker); boxText.setAttribute('onclick', 'alert("InfoBox clicked")'); 

Will this work for you?