Quick Tip: Disable Scroll Zoom in Google Maps

One of the APIs that I find myself working with more and more for a variety of projects is the Google Maps API. Specifically, the Google Maps JavaScript API.

The Google Maps JavaScript API

Though we can do some really cool stuff with it, it’s not my favorite API to work with. Perhaps I’m missing something, but I don’t find it particularly intuitive and it takes me longer to read through the documentation to figure out how to do something that seems as if it should be simple in comparison to some other languages’ documentation.

Anyway, so here’s a scenario: Let’s say that you have a map that spans the majority of a portion of a page – perhaps it spans 100%, even – and so when the user is scrolling down the page, the cursor hits the map and, because of the way Maps work, the map begins to zoom and the page stops scrolling.

This creates a disconnect between what the user is trying to do and what’s actually happening resulting in a bad user experience, right?

I mean, scrolling to zoom is one thing – it’s kind of become the natural thing that we do in order to zoom in and/or zoom out when working with things like this on the web – but when you’re working in a larger context, like a page, interrupting the flow of whatever the user is less than ideal.

Disable Scroll Zoom in Google Maps

So given a page that contains a large map and given the fact that users are going to scroll down the page likely hitting the map, how do we disable the map from zooming whenever the cursor is placed over it?

Luckily, the API accepts a single parameter that we can specify when constructing our map. See the scrollwheel option in the code below:

Easy, right?

And sure, all of this – and plenty more – is available in the JavaScript API reference, but it’s big. As in, it takes a while to surf through and it’s something that could be easy to miss if you’re not sure what you’re actually looking for.

Anyway, there you have it: How to disable scroll zoom in Google Maps. Hopefully this will help someone else working with the API or who happens to stumble across this page.

18 Replies to “Quick Tip: Disable Scroll Zoom in Google Maps”

  1. This is a great step in the right direction for me however I wanted to be able to completely disable zoom. Even with this addition it is still possible to double click the map and zoom, to stop that you need to add disableDoubleClickZoom: true in addition to the setting mentioned in this article.

  2. Hi, thanks for Your post. Can You explain how to use it in a WordPress. Now i pase into my functions.php file code (i’m using Genesis framework):

    // Enqueue google map scroll disable

    add_action( ‘wp_enqueue_scripts’, ‘genesis_disable_scroll’ );

    function genesis_disable_scroll() {

    wp_enqueue_script( ‘disable-scroll’, get_stylesheet_directory_uri() . ‘/js/disable-scroll-zoom.js’, array( ‘jquery’ ), ‘1.0.0’, true );

    }

    Second, i create file called disable-scroll-zoom.js

    .. and tell me what code should I place there to force it to work? :/

    Your code isnt enough.

    Sorry for my English and i hope that You can help me!

    1. The code that goes in disable-scroll-zoom.js is in the Gist in the post. That file then needs to be added to your theme. Make sure that it’s grabbing the proper ID for the map if you’re not using map-canvas.

      1. But this code is not working. Should i paste in a file or jQuery(function( $ ){ or something elese?? Clean code from Gits isin’t enough for newbie in .js :/

        I’m trying do that on this page: http://moszko-med.pl/kontakt/ As You can see in a website code is .js file from Your post, but nothing happens :/

      2. You are using WordPress, paste in this Post a samle of a map with disabled scroll zooming. I’ll check Your code. This is the best way for me. If You can, pls do that. Thx!

  3. Hi i made a jQuery plugin for solve that issue.

    This plugin prevents Google Maps iframe from capturing the mouse’s scrolling wheel / touch scrolling behavior wrapping the “iframe” with a transparent “div” on mouse / touch hover, so you must click / tap the unlock button to toggle the normal navigation. If you like you can see the Live Demo in http://diazemiliano.github.io/googlemaps-scrollprevent or download the code in https://github.com/diazemiliano/googlemaps-scrollprevent

  4. Well, i am currently experiencing the same problem as you outlined, i will implement this code and do hope it resolves my problem, it usually is not cool that you cannot scroll down once you reach the map position, especially since not all visitors to the site will be tech savvy to find a way out.

    1. Hey Mike,

      Do I even have Google Maps API? Is this something I need to register for?

      If you’re looking to manipulate the map programmatically, you’ll need to work with the API, but if you’re just looking to have the map display on a page then you should be fine.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.