Google Maps API – Disable Scroll Wheel Zoom

Posted on by

The Google Maps API overrides the scroll functionality of the scrollwheel so it zooms the map, this often causes problems when you have a large map spanning the page.

To prevent this in V3 of the Maps API add:

scrollwheel: false

To your mapOptions when initialising the map.

For example:

var mapOptions = {
	zoom: 14,
	center: point,
	mapTypeId: google.maps.MapTypeId.SATELLITE,
	scrollwheel: false      
}

map = new google.maps.Map(document.getElementById("map"), mapOptions);

Update: Feb 2016

A few people have emailed asking about disabling the scrolling on mobile / touch devices. The API lets you disable dragging by setting the option draggable to true / false. You can do a quick test for touch and disable scrolling using this snipped via Frankey on Stack Overflow:

{draggable: !("ontouchend" in document)};

If you still want to allow scrolling on mobile, you can leave a gutter around the map to aid moving the rest of the page (gross) or put an overlap on the map which disappears on tap to bring focus to the map.

7 thoughts on “Google Maps API – Disable Scroll Wheel Zoom”

  5. little confused at how to implement this direction. when you say initializing i’m thinking about opening a program but i have this problem when viewing maps in a browser. is that the html for the map display on a web page. how would i intercept that and add the direction (or am i changing an existing line “Scrollwheel: true” to read false?

    Is there a way I can direct the browser to insert the “false” anytime I open a page with the url maps.google.com?

    there aren’t enough symbol keys to display how much i hate this ‘feature’.

Comments are closed.