No se puede agregar el evento en el mapa de Google Infobox

Question

Estoy usando Infobox con Google Map V3 (imagen adjunta). Al hacer clic en Infobox, quiero ir a una página de detalles. Pero no puedo agregar un oyente de clic en el cuadro de información. Aquí está el código que estoy utilizando:

Ésta es mi caja de información de configuración:

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

Y añadió oyente a esta caja de información como esta:

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

Mientras enableEventPropagation = false, el evento no se propaga a MAP, pero ningún evento está funcionando en la caja de información.

Mientras que enableEventPropagation = true, los eventos (clic, mousedown) funcionan pero al hacer clic en otra parte del cuadro de información, me lleva al mapa u otro marcador.

¿Alguna idea de cómo solucionar esto?

Answer 1

Puede conectar un oyente a cualquiera que sea el contenido de su 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")'); 

¿Eso funcionaría para usted?

Answer 2

Tiene que agregar el evento domready al EventListener de infobox no a uno de Google Maps. Solo después de que html de infobox esté en la pantalla, puede vincular el evento. Para evitar el enlace de eventos múltiples, cierre otra carpeta de información antes de cargar una nueva.

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