Dirk.Net

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

map.enableScrollWheelZoom();

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.

ASP.NET

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(System.Environment.NewLine);

                //IE

            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.

Ruby on Rails

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):

 

 1 class TrafficController < ApplicationController

 2 

 3   def index

 4     @map = GMap.new(“map_div“)

 5     @map.control_init(:large_map => true,:map_type => true)

 6     @map.center_zoom_init([38.134557,-95.537109],4)

 7     @map.interface_init(:continuous_zoom => true, :scroll_wheel_zoom => true, :prevent_pagescroll => true)

 8     @map.icon_global_init(GIcon.new(:image => “/images/icon_incident.png“, :icon_size => GSize.new(15,15),:icon_anchor => GPoint.new(7,7),:info_window_anchor => GPoint.new(9,2)),“icon_incident“)

 9     @map.icon_global_init(GIcon.new(:image => “/images/icon_construction.png“, :icon_size => GSize.new(15,15),:icon_anchor => GPoint.new(7,7),:info_window_anchor => GPoint.new(9,2)),“icon_construction“)

10 

11   end

You can prevent the page from scrolling when using the mouse wheel zooming taking these two simple steps (using Esa’s code):

1. Add the following function to the public>javascripts>ym4r-gm.js JavaScript file:

 

function preventPageScroll(e)

{

if (!e){

e = window.event

}

if (e.preventDefault){

e.preventDefault()

}

e.returnValue = false;

}

2. Add the following code to the interface_init method in vendor>plugins>ym4r_gm>lib>gm_plugin>map.rb

 

if !interface[:prevent_pagescroll].nil?

          if interface[:prevent_pagescroll]

            @init << “#{@container}.onmousewheel = preventPageScroll;“

            @init << “GEvent.addDomListener(#{@container}, \”DOMMouseScroll\”,preventPageScroll);n”

          end

        end

Now simply set :prevent_pagescroll => true in the controller as in the sample code above. I’m quite new to Ruby and Rails and there certainly might be a better way to implement this but the code works. Hope it helps.

Update: Due to a WordPress bug the backslashes to escape the double-quotes around “DOMMouseScroll” in and before the newline (n) are not visible in the above code snippets. You will have to add them manually before I upgrade my Wordpress install.