Contrôler le zoom et le panoramique

Sélectionnez une plate-forme : Android iOS JavaScript

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,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

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",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

Voir un exemple

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,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

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,
    },
  },
});
index.ts

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,
    },
  },
});
index.js