Turn Off Zooming Google Map When Scrolling Mouse Wheel

When a large Google Map is shown on a page, I sometimes find it frustrating that when I scroll my mousewheel to navigate down the page, that the map zooms in or out intead. As a result, I wanted to demonstrate how this functionality can be disabled when using the Google Maps V3 API.

To begin, let’s look at how we might setup a very simple Google Map:

var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var mapOptions = {
	zoom: 13,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

In our ‘mapOptions’ object we’re specifying the options that should be applied to the map. To prevent the scrollwheel from zooming, we need to make a quick change to these options like so:

var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var mapOptions = {
	zoom: 13,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

By simply specifying a ‘scrollwheel’ property and setting it to ‘false’ the map will now not zoom in and out when rolling the mouse wheel.