Présentation
L'utilisation d'une carte sur une page Web peut nécessiter des options spécifiques afin de contrôler la façon dont les utilisateurs interagissent avec la carte pour zoomer et faire un panoramique. Ces options, comme gestureHandling
, minZoom
, maxZoom
et restriction
, sont définies dans l'interface MapOptions.
Comportement par défaut
La carte suivante illustre le comportement par défaut des interactions avec une carte instanciée, dont seules les options zoom
et center
sont définies.
Le code de cette carte est indiqué ci-dessous.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
Contrôler le traitement des gestes
Lorsque l'utilisateur fait défiler une page contenant une carte, il peut la zoomer par inadvertance. Ce comportement peut être contrôlé à l'aide de l'option de carte gestureHandling.
gestureHandling : cooperative
La carte ci-dessous utilise l'option gestureHandling définie sur cooperative
. Elle permet à l'utilisateur de faire défiler la page normalement, sans zoomer ni faire un panoramique. Les utilisateurs peuvent zoomer sur la carte en cliquant sur les commandes de zoom. Ils peuvent également zoomer et faire un panoramique sur la carte en effectuant des mouvements avec deux doigts sur les appareils à écran tactile.
Le code de cette carte est indiqué ci-dessous.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
gestureHandling : auto
La carte en haut de la page sans l'option gestureHandling
se comporte de la même façon que la carte précédente, avec gestureHandling défini sur cooperative
, car toutes les cartes sur cette page se trouvent dans un <iframe>
. La valeur par défaut de gestureHandling (auto
) passe de greedy
à cooperative
, selon que la carte est ou non contenue dans un <iframe>
.
Carte contenue dans <iframe> |
Comportement |
---|---|
oui | cooperative |
non | greedy |
gestureHandling : greedy
Vous trouverez ci-dessous une carte avec gestureHandling défini sur greedy
. Contrairement à cooperative
, cette carte réagit à tous les gestes tactiles et événements de défilement.
gestureHandling : none
L'option gestureHandling peut également être définie sur none
pour désactiver les gestes sur la carte.
Désactiver le panoramique et le zoom
Pour désactiver complètement les fonctions de panoramique et de zoom de la carte, vous devez inclure deux options : gestureHandling et zoomControl.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "none", zoomControl: false, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
La carte ci-dessous illustre la combinaison de gestureHandling et de zoomControl dans le code ci-dessus.
Restreindre les limites et le zoom de la carte
Il peut être souhaitable d'autoriser les gestes et les commandes de zoom, mais de restreindre la carte à des limites particulières ou de définir un zoom minimal et maximal. Pour ce faire, vous pouvez définir les options restriction, minZoom et maxZoom. Le code et la carte suivants illustrent ces options.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });