CODEWITHSUNDEEP
javascriptgoogle-maps
Dawood Awan
Dawood Awan

Reputation: 7328

Disable the Ctrl + Scroll to Zoom google maps

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

enter image description here

Upvotes: 116

Views: 61119

Answers (6)

Axium7
Axium7

Reputation: 189

This is how I enabled the Ctrl+Scroll to zoom without the ToolTip and Shading in 2024

mapOptions = new MapOptions
{
    Zoom = 18,
    MapTypeId = MapTypeId.Satellite,
    GestureHandling = "cooperative" // Enable Ctrl+Scroll zoom
    // It's important that you do not specify ScrollWheel = true because it will override the GestureHandling Property.
};

  /*Hide tooltips */
.gm-style > div > div > p[class^="gm-style-"] {
    opacity: 0 !important;
    display: none !important;
    visibility: hidden !important;  Changed 'none' to 'hidden' as visibility uses hidden/visible 
}

/* Target shading overlay more specifically */
.gm-style div[aria-hidden="true"][style*="background-color"],
.gm-style div[style*="background-color: rgb(0, 0, 0)"],
.gm-style div[style*="background-color: rgba(0, 0, 0"],
.gm-style > div:nth-child(1) > div:nth-child(3) {
    background-color: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

Upvotes: 0

kano
kano

Reputation: 5920

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

Upvotes: 191

ealfonso
ealfonso

Reputation: 7302

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

Upvotes: 5

Chumtarou
Chumtarou

Reputation: 313

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

Upvotes: 8

MisterMystery
MisterMystery

Reputation: 412

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

Upvotes: 5

Brendan Benson
Brendan Benson

Reputation: 773

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

Upvotes: 20

Related Questions