Controlar zoom e movimentos

Selecione a plataforma: Android iOS JavaScript

Visão geral

O uso de um mapa em uma página da Web requer opções específicas para controlar como as pessoas interagem com ele na hora de aplicar zoom e movimentar. Essas opções, como gestureHandling, minZoom, maxZoom e restriction, são definidas na interface MapOptions.

Comportamento padrão

O mapa a seguir demonstra o comportamento padrão de interações com um mapa instanciado apenas com as opções zoom e center definidas.

Confira abaixo o código desse 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

Controlar o gerenciamento de gestos

Quando uma pessoa rola uma página que contém um mapa, isso pode aumentar o zoom sem querer. Para controlar esse comportamento, use a opção de mapa gestureHandling.

gestureHandling: cooperative

O mapa abaixo usa a opção gestureHandling definida como cooperative, permitindo a rolagem da página normalmente, sem aplicação de zoom ou movimentação do mapa. Para aumentar o zoom do mapa, basta clicar nos respectivos controles. Outra opção para fazer isso (ou movimentar o mapa) é usar os movimentos de dois dedos em dispositivos com tela touch.

Confira abaixo o código desse 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

Amostra

gestureHandling: auto

O mapa na parte de cima da página, sem a opção gestureHandling, tem o mesmo comportamento que o mapa anterior com gestureHandling definido como cooperative, e isso acontece porque todos os mapas nesta página estão em um <iframe>. O valor padrão de gestureHandling auto alterna entre greedy e cooperative, dependendo de o mapa estar em um <iframe>.

Mapa contido em <iframe> Comportamento
sim cooperative
não greedy

gestureHandling: greedy

Abaixo mostramos um mapa com gestureHandling definido como greedy. Esse mapa reage a todos os gestos de toque e eventos de rolagem, diferentemente de cooperative.

gestureHandling: none

A opção gestureHandling também pode ser definida como none para desativar gestos no mapa.

Desativar movimentação e zoom

Para desativar totalmente a movimentação e aplicação de zoom ao mapa, é preciso incluir duas opções, gestureHandling e 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

O mapa abaixo demonstra a combinação de gestureHandling e zoomControl no código acima.

Restringir limites e zoom do mapa

Pode ser útil permitir gestos e controles de zoom e restringir o mapa a determinados limites ou estabelecer zoom mínimo e máximo. Para isso, defina as opções restriction, minZoom e maxZoom. O código e o mapa a seguir demonstram essas opções.

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