Désactiver le Ctrl + Scroll pour zoomer sur google maps

Question

Quelqu'un sait-il comment désactiver le CTRL + Scroll ?

Tout d'abord, lorsque la molette de la souris est déplacée, la carte effectue un zoom avant/arrière. Mais maintenant il demande d'appuyer sur CTRL + Molette de la souris Faire défiler pour faire un zoom avant/arrière.

Comment désactiver cette fonction ? Je ne trouve rien dans la documentation :

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

Answer 1

Vous devez passer gestureHandling: 'greedy' à vos options de carte.

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

Par exemple :

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

---

Mise à jour ! Depuis Google Maps 3.35.6 vous devez encastrer la propriété dans un wrapper d'options :

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

Merci. ealfonso pour les nouvelles informations

Answer 2

Si vous êtes d'accord pour désactiver complètement la fonction de défilement et de zoom, vous pouvez utiliser la méthode suivante scrollwheel: false . L'utilisateur pourra toujours zoomer sur la carte en cliquant sur les boutons de zoom si vous lui fournissez la commande de zoom ( zoomControl: true ).

Documentation : https://developers.google.com/maps/documentation/javascript/reference (recherchez "scrollwheel" sur la page)

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

Answer 3

Si vous souhaitez uniquement masquer la superposition mais désactiver la possibilité de faire défiler et de zoomer (comme auparavant), vous pouvez utiliser le CSS pour masquer la superposition :

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

Notez que cela la masquera également pour les téléphones mobiles. Vous pouvez donc utiliser quelque chose comme ceci pour vous assurer qu'elle affiche "utiliser deux doigts pour déplacer la carte" :

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

Answer 4

L'imbrication des gestureHandling dans un options La propriété a fonctionné pour moi sur la version "3.35.6".

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

Answer 5

Je n'ai pas été capable d'obtenir le gestureHandling: 'greedy' ne fonctionne pas pour moi puisque j'avais une superposition sur la carte. J'ai fini par détecter le mousewheel et de définir l'événement ctrl à 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 });
}