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;
}
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:
map.setOptions({'scrollwheel': false});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With