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