GMaps v3: How to cancel mouse scroll events before they scroll map

dom-events, google-maps, google-maps-api-3, javascript, overlay

Solution

When initializing the V3 Map you can specify an option to disable scrollwheel zooming:

var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Google Map V3 - Map Options

The option you are looking for is scrollwheel - you want to set that to False - by default this set to True.

Problem

Using Google maps v2, I was able to stop mouse scroll (DOMMouseScroll) events from going to the map and zooming the map by handling and cancelling the mouse scroll events. However, in v3, that no longer works. Here is an example. Try to scroll through the text with the mouse wheel Notice how drags, and double clicks are cancelled before they get to the map, however if you try to scroll through the text, then the DOMMouseScroll event goes right through to the map. The code to cancel events is basically the same as v2 and looks like this: ``` // Set the overlay's div_ property to this DIV this.div_ = div; var cancelEvent = function(e) { if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) || navigator.userAgent.indexOf('Opera') > -1) { window.event.cancelBubble = true; window.event.returnValue = false; } else { e.stopPropagation(); } return false; } var panes = this.getPanes(); panes.floatPane.appendChild(div); var stealEvents = [ 'mousedown', 'dblclick', 'DOMMouseScroll', 'onmousewheel', 'drag']; for( i=0; i < stealEvents.length; i++ ){ google.maps.event.addDomListener(this.div_, stealEvents[i], cancelEvent); } // for IE/Opera if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) || navigator.userAgent.indexOf('Opera') > -1) { this.div_.attachEvent('onmousewheel', cancelEvents); } // for safari if ( navigator.userAgent.indexOf('AppleWebKit/') > -1) { this.div_.onmousewheel = cancelEvents; } ```

Original source