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

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

Facebooktwitterredditpinterestlinkedinmail
Author: Dean WilliamsI'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips

Post Tags:
,
0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments