Google Maps InfoBox avec des gestionnaires de clic et une barre de défilement

Question

J'ai une application utilisant l'API javscript de Google Maps et le plugin Infobox (version personnalisable de l'InfoWindow natif). Il fonctionnait bien jusqu'à ce que j'ai eu l'utilisation suivante: J'ai besoin d'un Infobox avec une barre de défilement si le contenu est grand, et il doit également contenir quelques éléments HTML avec les écouteurs de clic. Ce que je dois habituellement faire pour supporter les gestionnaires de clics dans une infobox est de définir enableEventPropagation = true, et d'utiliser jQuery delegate pour définir le gestionnaire de clics. Le délégué jQuery ne fonctionne pas si je n'autorise pas la propagation d'événements.

Cela a bien fonctionné jusqu'à ce que je devais le combiner avec une barre de défilement fonctionnelle! Ce que j'ai trouvé est que la barre de défilement ne fonctionnera que si j'ai enableEventPropagation = false, parce que si la propagation d'événement est activée, l'événement de traînée est juste passé à la carte et interprété comme panning.

Est-ce que quelqu'un sait ce que je peux faire pour avoir une barre de défilement fonctionnelle sur le contenu de l'infobox, et être capable de définir des gestionnaires de clics sur certains conent? Pour moi, il semblerait logique que enableEventPropagation = false résoudrait les deux problèmes, car je ne comprends pas pourquoi l'événement click doit être propagé à la carte afin de déclencher les gestionnaires que j'attache aux éléments HTML.

C'est la configuration objet pour mon 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

Juste au cas où vous travaillez toujours sur celui-ci, vous devez changer vos options de carte pour désactiver le panoramique/zoom lorsque la souris entre l'infobox. Vous pouvez utiliser quelque chose comme ceci:

$(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"); 
});