Turn Off Zooming Google Map When Scrolling Mouse Wheel

February 21st, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

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.

This entry was posted on Thursday, February 21st, 2013 at 10:11 am by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (2)
  1. Natalia Smirnova says:

    thank you so much!

  2. Manoj verghese says:

    Thank You so much! This helps.