Turn Off Zooming Google Map When Scrolling Mouse Wheel
When a large Google Map is shown on a page, I sometimes find it frustrating that when I scroll my mousewheel to navigate down the page, that the map zooms in or out intead. As a result, I wanted to demonstrate how this functionality can be disabled when using the Google Maps V3 API.
To begin, let’s look at how we might setup a very simple Google Map:
var myLatlng = new google.maps.LatLng(37.4419, -122.1419); var mapOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
In our ‘mapOptions’ object we’re specifying the options that should be applied to the map. To prevent the scrollwheel from zooming, we need to make a quick change to these options like so:
var myLatlng = new google.maps.LatLng(37.4419, -122.1419); var mapOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
By simply specifying a ‘scrollwheel’ property and setting it to ‘false’ the map will now not zoom in and out when rolling the mouse wheel.
thank you so much!
Thank You so much! This helps.