Question

I have an application using the Google Maps javscript API and the Infobox plug-in (customizable version of the native InfoWindow).

It was working fine until I had the following use-case:
I need an Infobox with a scrollbar if the content is big, and it also needs to contain a couple of HTML elements with click listeners.

What I usually have to do to support click handlers inside an infobox is to set enableEventPropagation= true, and use jQuery delegate to set the click handler. jQuery delegate does not work if I do not allow event propagation.

This worked fine until I had to combine it with having a functioning scrollbar! What I have found is that the scrollbar will only work if I have enableEventPropagation= false, because if event propagation is enabled the drag event is just passed to the map and interpreted as panning.

Does anyone know what I can do to both have a functioning scrollbar on the infobox content, and be able to set click handlers on some of the conent?

To me it would sound logical that enableEventPropagation=false would solve both issues, since I don’t understand why the click event needs to be propagated to the map in order to fire the handlers I attach to the html elements.

This is the setup-object for my 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

Just in case you’re still working on this one, you need to change your map options to turn off panning/zooming when the mouse enters the infobox. You can use something like this:

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