Désactivez le Ctrl + Faites défiler pour Zoom google maps

95

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

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

Comment désactiver cette fonctionnalité? Je n'arrive pas à trouver quoi que ce soit dans la documentation:

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

javascript google-maps

— Dawood Awan
source

ce lien peut vous aider stackoverflow.com/questions/21992498/…

— Brajesh Kanungo

@BrajeshKanungo qui n'est pas lié à la fonctionnalité ci-dessus - c'est une nouvelle fonctionnalité introduite par Google Maps - je souhaite la désactiver.

— Dawood Awan

Ok, pouvez-vous me dire quelle version d'API vous utilisez.

— Brajesh Kanungo

la dernière version - maps.googleapis.com/maps/api/js?v=3.exp

— Dawood Awan

Cela vient d'apparaître sur notre site aussi, donc probablement une mise à jour sur l'API googles

— Tom

153

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

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

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

Merci ealfonsopour les nouvelles infos

— kano
source

@DiegoAndrade Je ne connais pas les détails. peut-être qu'il n'a pas été mis en œuvre à l'époque. Mais il est présent sur les versions 3.29(gelées), 3.30(release) et supérieures ( 3.exp, expérimentales).

— kano

Oui @Kano, dans ces documents cette fonctionnalité est toujours présente, mais sur mes tests ici, elle ne fonctionne pas. Je ne sais vraiment pas pourquoi ils ont supprimé ceci :(

— Diego Andrade

1

Je sais que c'est présent. C'est le but. En commençant par 3.30ça ne marche pas. J'ai testé toutes ces versions. Quoi qu'il en soit, cela fonctionne maintenant avec 3.26.

— Diego Andrade le

3

enfin la bonne réponse. Cela m'a pris du temps à chercher ça sur Google. Pourquoi Google n'a pas fait de cela la valeur par défaut me dépasse.

— woens

2

Bingo, c'est la solution parfaite.

— N Khan

17

Si vous êtes d'accord avec la désactivation complète du défilement pour zoomer, vous pouvez utiliser scrollwheel: false. L'utilisateur pourra toujours zoomer sur la carte en cliquant sur les boutons de zoom si vous leur 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
});

— Brendan Benson
source

7

Si vous cherchez à masquer uniquement la superposition tout en désactivant la possibilité de faire défiler et de zoomer (comme auparavant), vous pouvez utiliser CSS pour masquer la superposition:

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

Notez que cela le masquera également pour les mobiles afin que vous puissiez utiliser quelque chose comme ceci pour vous assurer qu'il indique "utiliser deux doigts pour déplacer la carte":

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

— Chumtarou
source

Je vous remercie. Je suis surpris que plus de gens ne le souhaitent pas. C'est un message de superposition très distrayant qui détruit pratiquement l'expérience de la carte pour moi.

— BaseZen

5

L'imbrication gestureHandlingdans une optionspropriété a fonctionné pour moi sur la version "3.35.6".

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

— ealfonso
source

4

Je n'ai pas pu faire fonctionner le gestureHandling: 'greedy'correctif pour moi car j'avais une superposition sur la carte. J'ai fini par détecter l' mousewheelévénement et définir la ctrlpropriété sur 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 });
}

— MonsieurMystery
source