Google Maps InfoBox con manejadores de clics y barra de desplazamiento

Question

Tengo una aplicación que usa la API de javascript de Google Maps y el complemento de InfoBox (versión personalizable del InfoWindow nativo).

Funcionó bien hasta que tuve el siguiente caso de uso: Necesito un Infobox con una barra de desplazamiento si el contenido es grande, y también debe contener un par de elementos HTML con oyentes de clic.

Lo que generalmente tengo que hacer para admitir los manejadores de clics dentro de un cuadro de información es establecer enableEventPropagation = true y usar el delegado de jQuery para establecer el manejador de clics. El delegado de jQuery no funciona si no permito la propagación de eventos.

¡Funcionó bien hasta que tuve que combinarlo con tener una barra de desplazamiento en funcionamiento! Lo que he encontrado es que la barra de desplazamiento solo funcionará si tengo enableEventPropagation = false, porque si la propagación de eventos está habilitada, el evento de arrastre se pasa al mapa y se interpreta como panning.

¿Alguien sabe lo que puedo hacer para tener una barra de desplazamiento en funcionamiento en el contenido de la infobox y poder configurar manejadores de clics en algunos de los sentidos?

Para mí, parece lógico que enableEventPropagation = false resuelva ambos problemas, ya que no entiendo por qué el evento click debe propagarse al mapa para disparar los manejadores que adjunto a los elementos html.

Ésta es la disposición a objetos para mi Infobox:

{ 
     content: "[my html in here]", 
     disableAutoPan: false, 
     pixelOffset: new google.maps.Size(-77, 10), 
     boxClass: "infoBox", 
     infoBoxClearance: new google.maps.Size(18, 30), 
     closeBoxMargin: "14px 6px", 
     pane: "floatPane", 
     enableEventPropagation: true 
}; 

Answer 1

En caso de que todavía estamos trabajando en este caso, es necesario cambiar sus opciones de mapa para apagar la panorámica/zoom cuando el ratón entra la caja de información Se puede usar algo como esto:

$(document).delegate("div#ib", "mouseenter", function() { 

    theMap.setOptions({ 
     draggable: false, 
     scrollwheel: false 
    }); 
    console.log("mouse enter detected"); 

}); 

$(document).delegate("div#ib", "mouseleave", function() { 
    theMap.setOptions({ 
     draggable: true, 
     scrollwheel: true 
    }); 
    console.log("mouseleave detected"); 
});