Contrôler le zoom et le panoramique

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
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 pour 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 uniquement avec les options zoom et center 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 la gestion des gestes

Lorsqu'un utilisateur fait défiler une page contenant une carte, l'action de défilement peut entraîner le zoom de la carte par inadvertance. Ce comportement peut être contrôlé à l'aide de l'option de mappage gestureHandling.

expression faciale : 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 avoir à 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 en effectuant des mouvements avec deux doigts sur la carte pour 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",
});

Afficher un exemple

expression faciale : auto

La carte en haut de la page sans l'option gestureHandling présente le même comportement que la carte précédente, avec gestureHandling défini sur cooperative, car toutes les cartes de cette page se trouvent dans un <iframe>. La valeur par défaut de gestureHandling (auto) bascule entre greedy et cooperative, selon que la carte est contenue dans un <iframe> ou non.

Carte contenue dans <iframe> Comportement
oui cooperative
non greedy

expression faciale : greedy

Une carte avec gestureHandling définie sur greedy est indiquée ci-dessous. Cette carte réagit à tous les gestes tactiles et événements de défilement, contrairement à cooperative.

expression faciale : 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.

Limiter les limites et le zoom de la carte

Il peut être souhaitable d'autoriser les gestes et les commandes de zoom, mais de limiter la carte à des limites particulières ou à 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,
    },
  },
});