Google Map API - Mouse Wheel Zooming while Preventing Page Scroll

Update: This post may be outdated as implementations of the Google Map API should support pagescroll prevention out of the box now. This has been checked for Ruby on Rails and the pertinent code was removed.

Since version 2.78 the Google Map API exposes mouse wheel scroll zooming straight out of the box, obviating the need for hacks and custom programming to get this essential user experience to fly. Mouse wheel zooming is enable by simply adding


after the code that creates your map. However, the API code will not disable the scrolling of the page so scrolling / zooming inside the map will also scroll the page up or down. This is detrimental to the user experience for all maps that are on a page that does not fit the browser window. Esa has created the most solid workaround I've found, and this solution is also suggested by Google. Here are implementations of Esa's solution for two of the leading web development environments.

For almost a year now I've used Reimers' Google Maps .NET control that can be used with ASP.NET, wrapping most of the JavaScript classes and greatly simplifying inserting maps into ASP.NET pages. _Note: I use an older version of the control so the below code might not work with newer versions (it should though). Code to prevent the page from scrolling, implementing Esa's code with Reimer's Google Maps .NET control:

bool preventPageScroll = true;
if (preventPageScroll)


            System.Text.StringBuilder sb = new System.Text.StringBuilder();

            sb.Append (@"function preventPageScroll(e){if (!e){e = window.event}if (e.preventDefault){e.preventDefault()}e.returnValue = false;};");

                //Firefox et al.

            sb.Append(String.Format("GEvent.addDomListener(document.getElementById(\"{0}\"), \"DOMMouseScroll\", preventPageScroll);", GoogleMap1.ClientID));



            sb.Append(String.Format("{0}.onmousewheel = preventPageScroll;", GoogleMap1.ClientID));

            GoogleMap1.PostRenderScript += sb.ToString();


document.getElementById looks redundant here but I couldn't get it to work any other way.

If you're planning to use the Google Map API from Ruby on Rails you can't pass by the fantastic ym4r_gm plugin by Guilhem Vellut. Be sure to also walk through the Google Maps / Yahoo Traffic mash-up. The plugin supports mouse wheel zooming directly. You can enable it by simply adding @map.interface_init (:scroll_wheel_zoom => true) in the controller like so (line 7):

class TrafficController < ApplicationController

def index
  @map ="map_div")
  @map.control_init(:large_map => true,:map_type => true)
  @map.interface_init**(:continuous_zoom ****=> true, :scroll_wheel_zoom =>**** true**) 

**Update: The latest version of the YM4R gem/plugin supports pagescroll prevention out-of-the-box so the pertinent code has been removed.**

Posted: 28 September 2007

comments powered by Disqus