How to turn off mouse wheel zoom functionality in Google Maps JavaScript API

Other Questions API
1

I’m working with Google Maps JavaScript API version 3 and have several map instances on my webpage. I need to prevent users from zooming in or out when they use their mouse wheel while hovering over the map area.

I already tried turning off the scaleControl option which removes the zoom buttons from the map interface, but the mouse wheel zoom still works and I want to completely disable it.

Here’s my current implementation using a jQuery extension:

$.fn.createMap = function(settings, address){
  settings = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, settings);
  var mapInstance = new google.maps.Map(document.getElementById($(this).attr('id')), settings);

  // Additional code removed for brevity
};

What configuration option do I need to add to completely disable mouse wheel zooming behavior?

2

Use scrollwheel: false in your settings object. I had the same issue with a dashboard full of embedded maps - users kept zooming accidentally while scrolling through the page. This option fixed it completely and stopped the maps from hijacking the scroll. If you’re planning to update your API version later, consider gestureHandling: 'cooperative' instead. Users have to hold Ctrl while scrolling to zoom, which is a nice middle ground between no zooming and the default behavior.

3

Use scrollwheel: false in your settings object. However, be aware that this property has been deprecated in newer API versions and replaced with gestureHandling. If you’re using a newer version, try gestureHandling: 'none' instead, as it disables all gesture interactions including scroll wheel zoom, pinch-to-zoom on mobile, and drag gestures. I encountered compatibility issues when updating my maps and had to switch from the old scrollwheel property to gestureHandling to ensure functionality across different API versions.

4

just add scrollwheel: false to settings object - thatll fix it! had the same issue a few months back, this worked for me.