Unable to add event on Google map Infobox

Question

I am using Infobox with Google Map V3 (attached image). While clicking on Infobox, I want to go to a details page. But I am not able to add a click listener on the infobox. Here is the code I am using:

This is my infobox config:

    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 listener to this infobox like this:

    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 doesn't propagate to MAP but no event is working on the infobox.

While enableEventPropagation = true, the events (click, mousedown) works but clicking on other part of the infobox, it takes me to map or another marker.

Any idea how to solve this?

Answer 1

You need to add domready event to infobox's eventListener not to google maps' one. Only after infobox's html is on screen, you can bind event. To prevent multi event binding, close other infobox before you load 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 */ });
  });
});