Google Maps API v3 won't disable scroll wheel after map loads

5
votes

I'm implementing google maps on a website and everything is working great, except that I can't seem to be able to disable the scrollwheel after the maps has loaded. If I set the option before the map loads to scrollwheel: false, then the scroll wheel is disabled, but if I try and do it later (I have a checkbox that enables/disables the scroll wheel).

Here are my options for the google map on page load:

var myOptions = {
            zoom: 15,
            center: currentPosition,
            draggable: true,
            scrollwheel: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

and then after the click event has trigger on the checkbox, I have the following code to disable the scrollwheel. funny enough, the draggable = false is working and prevents me from dragging the map.

var checked = $('#chkPin').is(':checked');
        log("map active: " + checked);
        if (checked) {
            map.scrollwheel = false;
            map.draggable = false;
            map.zoomControl = false;
        } else {
            map.scrollwheel = true;
            map.draggable = true;
            map.zoomControl = true;
        }
1
javascriptgoogle-maps-api-3

1 Answers

25
votes

Editing undocumented properties on Maps API objects is not supported and can lead to unpredictable results. You shouldn't directly modify properties on a map object. Instead, modify the properties using one of the documented options:

Object specific defined getters/setters:

map.setOptions({'scrollwheel': false});

MVCObject generic getters/setters:

map.set('scrollwheel', false);
var isScrollWheelEnabled = map.get('scrollwheel');

Both of these options successfully disabled scrollwheel zooming of the map after it had already been initialized.