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.