禁用 Ctrl + 滚动条来缩放谷歌地图

You need to pass gestureHandling: 'greedy' to your map options.

Documentation: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

For example:

const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
gestureHandling: 'greedy'
});

Update! Since Google Maps 3.35.6 you need to encase the property into an options wrapper:

const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
options: {
gestureHandling: 'greedy'
}
});

Thank you ealfonso for the new info

If you're OK with disabling scroll-to-zoom entirely, you can use scrollwheel: false. The user will still be able to zoom the map by clicking the zoom buttons if you provide them with the zoom control (zoomControl: true).

Documentation: https://developers.google.com/maps/documentation/javascript/reference (search the page for "scrollwheel")

const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
scrollwheel: false,
zoomControl: true
});

I wasn't able to get the gestureHandling: 'greedy' fix to work for me since I had an overlay over the map. I ended up detecting the mousewheel event and setting the ctrl property to true.

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);


function wheelEvent(event) {
// Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
Object.defineProperty(event, 'ctrlKey', { value: true });
}

If you are looking to only hide the overlay but still disable the ability to scroll and zoom (like before), you could use CSS to hide the overlay:

.gm-style-pbc {
opacity: 0 !important;
}

Note this will hide it for mobile as well so you could use something like this to ensure it shows "use two fingers to move the map":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}

Nesting the gestureHandling within an options property worked for me on version "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
options:{
gestureHandling: 'greedy'
}
});