Practical WordPress Development

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 Comments

  1. Marja Erwin

    Hi,

    As a user with sensory processing issues, is there any way for me to block zooming maps when visiting sites, using Firefox?

    • Tom

      To my knowledge, this has to be done from the developer’s side so I don’t know if it’s possible to do so on the client’s side in Firefox or not.

  2. Ben

    Wow, thanks! This was surprisingly easy, and you explained it well. The Google Map API is completely new territory for me so this helped a lot.

    • Tom

      Glad to help, Ben! And good luck – Google Maps is fun but it’s not the greatest API with which to work.

  3. Simon Dingley

    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.

    • Tom

      Thanks for mentioning this, Simon!

  4. Kamil

    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!

    • Tom

      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.

      • Kamil

        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 :/

      • Kamil

        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!

        • Tom

          I’m not going to have time to do that — the post in and of itself is the best information I can provide on doing this.

  5. Emiliano

    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

  6. Mark Benny

    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.

    • Tom

      Good luck with it! The API is weird to put it mildly.

      You may have to resort to some vanilla JavaScript of your own to manipulate it as you need.

  7. Mike

    I’m a bit confused here. I just embedded a google map using iframe (as Google suggests) into a website.

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

    Thanks.

    • Tom

      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.

  8. Revolution

    Thank you this helped

Leave a Reply

© 2020 Tom McFarlin

Theme by Anders NorenUp ↑