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?

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?

• javascript
• google-maps-api-3
• dom-events
• sencha-touch-2
• infobox

Share Improve this question Follow edited Jun 16, 2020 at 12:01 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 20, 2012 at 10:25 Sumit JhaSumit Jha 36811 gold badge55 silver badges1111 bronze badges 1

• Did you solve your problem ? If yes, then please share your answer with us. – rpelluru Commented Nov 12, 2012 at 4:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 */ });
  });
});

You can attach a listener to whatever 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")');

Would that work for you ?