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; } ```