Search code examples
jquerygoogle-mapsgoogle-maps-api-3jquery-plugins

How to disable mouse scroll wheel scaling with Google Maps API


I am using Google Maps API (v3) to draw a few maps on a page. One thing I'd like to do is disable zooming when you scroll the mouse wheel over the map, but I'm unsure how.

I have disabled the scaleControl (i.e. removed the scaling UI element), but this doesn't prevent scroll wheel scaling.

Here is part of my function (it's a simple jQuery plugin):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

Solution

  • In version 3 of the Maps API you can simply set the scrollwheel option to false within the MapOptions properties:

    options = $.extend({
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }, options);
    

    If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom() API call as follows:

    map.disableScrollWheelZoom();
    

    The scrollwheel zooming is enabled by default in version 3 of the Maps API, but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom() API call.