Cómo controlar el zoom y el desplazamiento lateral

Seleccionar plataforma: Android iOS JavaScript

Descripción general

Cuando se usa un mapa en una página web, a veces se requieren opciones específicas para controlar el modo en que los usuarios interactúan con el mapa para hacer zoom y desplazarse lateralmente. Estas opciones, como gestureHandling, minZoom, maxZoom y restriction, se definen dentro de la interfaz de MapOptions.

Comportamiento predeterminado

En el siguiente mapa, se muestra el comportamiento predeterminado para las interacciones con mapas en las que se crean instancias solo con las opciones zoom y center.

A continuación, se incluye el código de este mapa.

TypeScript

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

JavaScript

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

Cómo utilizar el controlador de gestos

Cuando un usuario se desplaza por una página que contiene un mapa, esta acción puede hacer que el mapa se acerque de manera no intencional. Este comportamiento se puede controlar con la opción de mapa gestureHandling.

gestureHandling: cooperative

En el siguiente mapa, se usa la opción gestureHandling configurada en cooperative para que el usuario se desplace por la página normalmente, sin hacer zoom ni desplazarse lateralmente por el mapa. Así, los usuarios pueden hacer clic en los controles de zoom si desean hacer zoom en el mapa. También pueden hacer zoom y desplazarse lateralmente en el mapa con movimientos de dos dedos en los dispositivos con pantalla táctil.

A continuación, se incluye el código de este mapa.

TypeScript

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

JavaScript

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

Ver muestra

gestureHandling: auto

El mapa ubicado en la parte superior de la página, sin la opción gestureHandling, tiene el mismo comportamiento que el mapa anterior, que tiene la opción gestureHandling establecida en cooperative, porque todos los mapas de esta página cuentan con un <iframe>. El valor predeterminado de gestureHandling auto alterna entre greedy y cooperative en función de si el mapa se contiene en un <iframe>.

Mapa contenido en un <iframe> Comportamiento
cooperative
no greedy

gestureHandling: greedy

A continuación, se muestra un mapa con gestureHandling establecido en greedy. Este mapa reacciona a todos los gestos táctiles y eventos de desplazamiento, a diferencia de cooperative.

gestureHandling: none

La opción gestureHandling también se puede configurar como none para inhabilitar los gestos en el mapa.

Cómo inhabilitar el desplazamiento lateral y el zoom

Para inhabilitar por completo las capacidades de desplazamiento lateral y zoom, se deben incluir dos opciones, gestureHandling y 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,
});

En el siguiente mapa, se muestra la combinación de gestureHandling y zoomControl en el código anterior.

Cómo restringir los límites del mapa y el zoom

A veces es conveniente habilitar los controles de gestos y el zoom, y restringir el mapa a ciertos límites o a niveles máximos y mínimos de zoom. Para ello, puedes configurar las opciones restriction, minZoom y maxZoom. En el código y el mapa que aparecen a continuación, se muestran estas opciones.

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