Disable mouse scroll-wheel scaling with Google Maps v3 while in an infowindow

Question

I've been trying to disable the mouse sroll-wheel scaling on my maps, but it doesn't seem to work (altough I'm pretty sure it used to work, maybe something changed).

Anyway, I have those custom infowindows that appear when users click on map markers and sometimes they have enough content that a scrollbar appears in them. I want to make sure that when people scroll, the content of the infowindow scrolls and that the map stays the same.

My code (coffeescript):

# Disable map Dragging when cursor enters infoBox div
$(document).on "mouseenter", ".infobox-content", () ->
  googleMap.setOptions( {draggable:false, scrollwheel:false} )

$(document).on "mouseleave", ".infobox-content", () ->
  googleMap.setOptions( {draggable:true, scrollwheel:true} )

I made sure that the events were fired when appropriate and that the events were properly set, but it still doesn't work.

Other similar questions that tell me to do exactly what I'm doing:

slavugan slavugan · Accepted Answer · 2017-01-04T16:20:03

this works for me (FF, Chrome):

infowindow.open(map, marker);
$('.gm-style-iw').on('wheel', function (e) {
    e.stopPropagation();
});

you should bind eventlistener every time you call infowindow.open();

Disable mouse scroll-wheel scaling with Google Maps v3 while in an infowindow

2 Answers