Cómo controlar el zoom y el desplazamiento lateral

Selecciona la 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 a la hora de 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 los que se crearon 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,
});
index.ts

JavaScript

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

Cómo utilizar el controlador de gestos

Cuando un usuario se desplaza por una página que contiene un mapa, puede hacer zoom en este 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 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",
});
index.ts

JavaScript

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

Ver ejemplo

gestureHandling: auto

El mapa que aparece en la parte superior de esta página, que no incluye la opción gestureHandling, tiene el mismo comportamiento que el mapa anterior, que presenta la opción gestureHandling establecida en cooperative, ya que 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 <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 establecer en none para inhabilitar los gestos en el mapa.

Cómo inhabilitar el desplazamiento lateral y el zoom

Para inhabilitar completamente las funciones de zoom y desplazamiento lateral en un mapa, se deben incluir dos opciones: gestureHandling y 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

En el siguiente mapa, se combinan gestureHandling y zoomControl, como se puede ver 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 de zoom máximos y mínimos. Para lograr esto, puedes configurar las opciones restriction, minZoom y maxZoom. Consulta el código y el mapa que aparecen a continuación para ver 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,
    },
  },
});
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