I’m working with Google Maps JavaScript API version 3 and need to turn off the zoom feature that happens when users scroll their mouse wheel over the map. I already got rid of the zoom control buttons from the interface by setting scaleControl to false, but people can still zoom in and out using their mouse wheel.
Here’s my current map setup code using a jQuery extension:
Heads up - if you’re on a newer API version, Google deprecated scrollwheel and replaced it with zoomControl: false.
I hit this during a migration last year updating maps on a logistics dashboard. Spent way too long figuring out why scrollwheel: false wasn’t working anymore.
Honestly, manually configuring maps like this gets messy fast with multiple maps or dynamic requirements across pages.
I’ve automated map deployments for years. Hardcoding works for simple cases, but it’s a nightmare managing dozens of maps with different zoom behaviors based on user types, devices, or content.
Now I use automated workflows that handle all the configuration logic. They detect device type, user permissions, and page context, then automatically apply the right scrollwheel, gestureHandling, and other properties without touching code.
The workflow pulls map settings from a database, applies conditional logic for mobile vs desktop, and can even A/B test different interaction modes. You get logging on how users interact with your maps, which helps optimize the experience.
Way cleaner than maintaining jQuery extensions and manual property setting. The automation handles edge cases and browser compatibility automatically.
quick tip - use gestureHandling: 'none' to block all mouse and touch interactions, including wheel zoom. fixed all my users’ complaints about accidental mobile zooming in one shot. just heads up: it kills pinch zoom too, so mobile users can’t zoom at all.
Both answers work, but here’s another option. You can disable wheel zoom after map initialization with map.setOptions({scrollwheel: false}). Super useful when you need conditional control - I’ve used this on e-commerce sites where maps show store locations and admins needed to toggle zoom features based on user permissions. You can bind it to events or user actions without rebuilding the entire map config. Just heads up - if you’re dealing with older browsers, scrollwheel has better compatibility than gestureHandling, which came later in the API.
Just use gestureHandling: 'none' instead - it’s the newer approach in the current API. The scrollwheel property works fine, but gestureHandling gives you way more control over how users interact with the map.
Add scrollwheel: false to your settings object and you’re done.
Here’s the updated code:
$.fn.createMap = function(settings, address){
settings = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
scrollwheel: false, // This disables wheel zoom
mapTypeId: google.maps.MapTypeId.ROADMAP
}, settings);
var mapInstance = new google.maps.Map(document.getElementById($(this).attr('id')), settings);
// Additional code removed for brevity
};
Had this exact problem a few years back with an embedded map on a client dashboard. They wanted users scrolling through page content without accidentally zooming the map. The scrollwheel property fixed it instantly.
If you need to re-enable it later, just use map.setOptions({scrollwheel: true}) on your map instance.
If you’ve got mobile users, try gestureHandling: 'cooperative' instead of killing all interactions. I hit this issue on a restaurant site - people couldn’t scroll past the map because it grabbed every touch. Cooperative mode makes users pinch with two fingers to interact, so they can scroll normally but still use the map when they want to. But if you really want zero interaction like OP asked, then yeah, scrollwheel: false works great for desktop wheel zoom.