JavaScript: Page scrolls when you use scroll wheel on Google Maps

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

Firefox (and perhaps other browsers) seems to have a bug when it comes to using the scroll wheel on an embedded Google Map. Quite often the page will also scroll when you use the wheel to zoom in and out, this is really frustrating and made worse by the fact it doesn't always happen!

I’ve been trying to find a solution to this all day, and I’ve finally managed to get a solution together. I will show two different approaches to fixing this, the first approach will be for those using the Google Maps with jQuery, and the second for those using normal JavaScript without the jQuery library.

Google Maps (Normal JavaScript)

Here is some demonstration code, please note that you will still need jQuery for the selector, browser detection and for binding the event. Make sure you include jQuery.

<html>
	<head>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBCB6SUvkItEUbumGEhvy7dGWBemCyqWbU&sensor=true"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			function googlemaps_start() {
				var myOptions = {
					center: new google.maps.LatLng(52.687517, -2.026255),
					disableDefaultUI: true,
					zoom: 13,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

				var overlay = new google.maps.OverlayView();
				overlay.draw = function() {};
				overlay.setMap(map);

				/* Fix Google Maps scroll wheel bug
				 * By Dean Williams - http://dean.resplace.net
				 */
				if($.browser.mozilla) {
					// Wait for the map DOM to be ready
					google.maps.event.addListenerOnce(map, 'idle', function() {
						$('#map_canvas > div > div:first-child > div').bind('DOMMouseScroll', function(e) {
							// setTimeout needed otherwise the return false has no effect
							setTimeout(function() {
								// Calculate new center
								var offset = $('#map_canvas').offset();
								var pos = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX-offset.left, e.pageY-offset.top));

								// Calculate new zoom level
								var zoom = map.getZoom();
								if(e.detail < 0) zoom++;
								else if(e.detail > 0) zoom--;

								map.setCenter(pos);
								map.setZoom(zoom);
							}, 1);

						// Stop propagation (prevent default)
							return false;
						});
					});
				}
			
			};
		</script>
	</head>
	<body onload="googlemaps_start();">
		<div style="height:1200px;padding-top:100px;padding-left:100px;">
			<div id="map_canvas" style="width:300px; height:300px"></div>
		</div>
	</body>
</html>

Google Maps (with jQuery)

Here is some demonstration code, make sure you include jQuery and jQuery Ui Maps.

<html>
	<head>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBCB6SUvkItEUbumGEhvy7dGWBemCyqWbU&sensor=true"></script>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.ui.map.js"></script>
		<script type="text/javascript">
			
			$(document).ready(function () {
				$('#map_canvas').gmap({'zoom': 13, 'disableDefaultUI':true, 'center': '52.687517, -2.026255'}).bind('init', function(evt, map) { 
					var overlay = new google.maps.OverlayView();
					overlay.draw = function() {};
					overlay.setMap(map);

					/* Fix Google Maps scroll wheel bug
					 * By Dean Williams - http://dean.resplace.net
					 */

					if($.browser.mozilla) {
						// Wait for the map DOM to be ready
						google.maps.event.addListenerOnce(map, 'idle', function() {
							$('#map_canvas > div > div:first-child > div').bind('DOMMouseScroll', function(e) {
								// setTimeout needed otherwise the return false has no effect
								setTimeout(function() {
									// Calculate new center
									var offset = $('#map_canvas').offset();
									var pos = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX-offset.left, e.pageY-offset.top));

									// Calculate new zoom level
									var zoom = map.getZoom();
									if(e.detail < 0) zoom++;
									else if(e.detail > 0) zoom--;

									map.setCenter(pos);
									map.setZoom(zoom);
								}, 1);

							// Stop propagation (prevent default)
								return false;
							});
						});
					}
				});
			});
		</script>
	</head>
	<body>
		<div style="height:1200px;padding-top:100px;padding-left:100px;">
			<div id="map_canvas" style="width:300px; height:300px"></div>
		</div>
	</body>
</html>

 

Please drop me some code if you manage to get the non-jQuery solution working without any jQuery dependency (before I have time to work a solution that is).

Please give credit if this has helped you with your project. Enjoy! Smile

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips