Zoomen und Schwenken steuern

Plattform auswählen: Android iOS JavaScript

Übersicht

Wenn Sie eine Karte auf einer Webseite einbetten möchten, brauchen Sie unter Umständen bestimmte Optionen, mit denen Sie steuern, wie Nutzer beim Zoomen und Schwenken mit der Karte interagieren. Diese Optionen, z. B. gestureHandling, minZoom, maxZoom und restriction, werden auf der MapOptions-Oberfläche definiert.

Standardverhalten

Bei der folgenden Karte wird das Standardverhalten für Karteninteraktionen genutzt, wobei nur die Optionen zoom und center instanziiert sind.

Den Code für diese Karte finden Sie unten.

TypeScript

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

JavaScript

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

Festlegen, wie Touch-Gesten verarbeitet werden

Scrollt ein Nutzer auf einer Seite mit einer Karte, löst das möglicherweise ungewollt ein Zoomen aus. Dieses Verhalten lässt sich mit der Kartenoption gestureHandling steuern.

gestureHandling: cooperative

Bei der folgenden Karte ist die Option gestureHandling auf cooperative gesetzt. So können Nutzer scrollen, ohne dass die Karte dadurch vergrößert bzw. verkleinert oder geschwenkt wird. In diesem Fall können Nutzer die Karte durch Klicken auf die Zoomsteuerelemente vergrößern oder verkleinern. Auf Geräten mit Touchscreen haben sie auch die Möglichkeit, die Karte mit zwei Fingern zu zoomen und zu schwenken.

Den Code für diese Karte finden Sie unten.

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

Beispiel ansehen

gestureHandling: auto

Die Karte oben auf der Seite, für die die Option gestureHandling nicht festgelegt ist, funktioniert genauso wie die vorherige Karte, bei der gestureHandling auf cooperative gesetzt ist, da sich alle Karten auf dieser Seite in einem <iframe> befinden. Der Standardwert für gestureHandling auto schaltet automatisch zwischen greedy und cooperative um, je nachdem, ob die Karte in einem <iframe> enthalten ist.

Verhalten einer Karte in einem <iframe>: Behavior
ja cooperative
nein greedy

gestureHandling: greedy

Bei der folgenden Karte ist gestureHandling auf greedy festgelegt. Anders als bei cooperative reagiert die Karte hier auf alle Touch-Gesten und auf Scrollen.

gestureHandling: none

Die Option gestureHandling kann auch auf none gesetzt werden, damit die Karte nicht auf Touch-Gesten reagiert.

Schwenken und Zoomen deaktivieren

Wenn Sie verhindern möchten, dass sich die Karte schwenken oder zoomen lässt, müssen Sie die beiden Optionen gestureHandling und zoomControl einbinden.

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

Bei der folgenden Karte sehen Sie, wie sich die Kombination von gestureHandling und zoomControl im Code oben auswirkt.

Kartengrenzen und Zoom einschränken

Es kann sinnvoll sein, Touch-Gesten und Zoomsteuerelemente zu nutzen, die Karte aber auf bestimmte Grenzen oder einen minimalen und maximalen Zoombereich zu beschränken. Definieren Sie dazu die Optionen restriction, minZoom und maxZoom. Im folgenden Code und in der Karte sind diese Optionen festgelegt.

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