Disable the Ctrl + Scroll to Zoom google maps

Question

Does anybody know how to disable the CTRL + Scroll?

First when the mouse wheel was moved the Map would Zoom in/out. But now it asks to press CTRL + Mouse Wheel Scroll to Zoom in/out.

How do we disable this feature? I can't seem to find anything in the documentation:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

this link may help you https://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-on-embedded-google-maps — Brajesh Kanungo, Aug 17 '17 at 07:34
@BrajeshKanungo that is not related to the above feature - this a new feature introduced by Google Maps - I want to disable it. — Dawood Awan, Aug 17 '17 at 07:35
the latest version -https://maps.googleapis.com/maps/api/js?v=3.exp — Dawood Awan, Aug 17 '17 at 07:39
This has just appeared on our site too, so probably an update on googles API — Tom, Aug 17 '17 at 09:06

kano · Accepted Answer · 2019-11-14T11:24:28.117

184

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

edited Nov 14 '19 at 11:24

answered Aug 17 '17 at 08:02

kano

5,626
3
33
48

@DiegoAndrade I'm not aware of the details. maybe it wasn't implemented back then. But it's present on versions `3.29` (frozen), `3.30` (release) and upwards (`3.exp`, experimental). – kano Nov 23 '17 at 08:38
Yes @Kano, in these docs this feature is still present, but on my tests here it is not working. I really don't know why they removed this :( – Diego Andrade Nov 23 '17 at 14:59
They didn't remove it, they added it after version `3.26`. Simply update your script and you're good to go : ) – kano Nov 24 '17 at 10:18
Yeah, it's working with `3.26`, `3.27`, `3.28` and `3.29`. Starting with `3.30` is does not work anymore. At least for now. – Diego Andrade Jan 05 '18 at 23:54
Sorry @DiegoAndrade but I simply can't agree with you. If you look at this link, then `gestureHandling` is present on all 3 selectable versions (that means `3.29`, `3.30` *and* `3.31`): [See the docs](https://developers.google.com/maps/documentation/javascript/3.exp/reference) – kano Jan 09 '18 at 09:48
1

I know it is present. That's the point. Starting with `3.30` It's not working. I tested all these versions. Anyway, it's working by now with `3.26`. – Diego Andrade Jan 09 '18 at 16:00
3

finally the right answer. Took me a long time googling for this. Why google did't make this the default is beyond me. – woens Jan 31 '18 at 13:41
2

Bingo, this is the perfect solution. – N Khan Apr 01 '18 at 07:13
OK, but there is also the case of the user looking for a browser extension to do the job, if he is unable to contact the map author. – Dan Jacobson Sep 08 '19 at 10:39

score 20 · Answer 2 · answered Nov 01 '17 at 19:01

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
});

score 8 · Answer 3 · answered Sep 19 '18 at 22:25

8

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;
}
}

answered Sep 19 '18 at 22:25

Chumtarou

313
5
15

Thank you. I'm surprised more people don't want this. It's a *very* distracting overlay message that virtually destroys the map experience for me. – BaseZen Apr 23 '19 at 15:50

score 5 · Answer 4 · answered Dec 25 '18 at 21:34

5

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'
        }
    });

answered Dec 25 '18 at 21:34

ealfonso

6,622
5
39
67

score 4 · Answer 5 · answered Jun 28 '18 at 14:54

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 });
}

Disable the Ctrl + Scroll to Zoom google maps

5 Answers5

Linked