Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Scroll- und Schwenkverhalten

Mit der Option gestureHandling im Objekt MapOptions können Sie das Schwenk- und Scrollverhalten einer Karte steuern, die auf einem Mobilgerät angezeigt wird.

Beispiel

Im folgenden Beispiel wird die Gestenhandhabung vom Typ cooperative verwendet. Zeigen Sie die Demo auf einem Mobilgerät an, um den Code in Aktion zu sehen.

/**
 * This sample sets the gesture handling mode to 'cooperative',
 * which means that on a mobile device, the user must swipe with one
 * finger to scroll the page and two fingers to pan the map.
 */
function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng,
    gestureHandling: 'cooperative'
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Cooperative Gesture Handling</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>

      /**
       * This sample sets the gesture handling mode to 'cooperative',
       * which means that on a mobile device, the user must swipe with one
       * finger to scroll the page and two fingers to pan the map.
       */
      function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          gestureHandling: 'cooperative'
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Gestenhandhabung

Im mobilen Internet kann es für Nutzer lästig sein, wenn sie zum Scrollen wischen, die Karte aber stattdessen geschwenkt wird.

Die Google Maps JavaScript API stellt die Option gestureHandling im Objekt MapOptions zur Verfügung, mit der Sie das Nutzererlebnis bei der Interaktion mit der Karte verbessern können. Folgende Werte sind verfügbar:

  • greedy: Die Karte wird immer geschwenkt (nach oben oder unten, links oder rechts), wenn der Nutzer über den Bildschirm wischt (zieht). Mit anderen Worten, gleich ob der Wischvorgang mit einem oder zwei Fingern durchgeführt wird, die Karte wird geschwenkt.
  • cooperative: Der Nutzer muss mit einem Finger wischen, um die Seite zu scrollen, und mit zwei Fingern, um die Karte zu schwenken. Wenn der Nutzer mit einem Finger auf der Karte wischt, erscheint eine Überlagerung auf der Karte und der Nutzer wird aufgefordert, zwei Finger zu verwenden, um die Karte zu bewegen. Zeigen Sie das obige Beispiel auf einem Mobilgerät an, um den Modus „cooperative“ in Aktion zu sehen.
  • none: Die Karte ist nicht schwenkbar und das Zusammenführen von Fingern kann nicht auf der Karte angewendet werden.
  • auto (Standard): Die verfügbaren Werte für das Verhalten sind entweder cooperative oder greedy, je nachdem, ob auf der Seite ein Bildlauf ausgeführt werden kann oder nicht. Im Einzelnen: Wenn als Option auto festgelegt ist, wählt die API das folgende Verhalten:
    • cooperative, wenn der Seiteninhalt größer als das Fenster ist oder wenn die API die Seitengröße nicht ermitteln kann (z. B. wenn sie in einem iframe enthalten ist).
    • greedy, wenn der Seiteninhalt nicht größer als das Fenster ist, sodass es unwahrscheinlich ist, dass der Nutzer scrollen muss.

Das Vollbild-Steuerelement ist auf Mobilgeräten standardmäßig sichtbar, sodass Nutzer die Karte problemlos vergrößern können. Wenn sich die Karte im Vollbildmodus befindet, können Nutzer die Karten mit einem oder zwei Fingern schwenken. Hinweis: iOS unterstützt die Vollbildfunktion nicht. Das Vollbild-Steuerelement ist daher auf iOS-Geräten nicht sichtbar.

Ereignisse

Die API löst u. a. die folgenden Ereignisse aus, wenn Nutzer die Karte scrollen oder ziehen.

  • drag: Dieses Ereignis wird wiederholt ausgelöst, wenn der Nutzer einen Ziehvorgang auf der Karte durchführt.
  • dragstart: Dieses Ereignis wird ausgelöst, wenn der Nutzer mit dem Ziehen der Karte beginnt.
  • dragend: Dieses Ereignis wird ausgelöst, wenn der Nutzer das Ziehen der Karte beendet.

Weitere Informationen finden Sie im Leitfaden für Ereignisse und in der Referenz.

Einschränkungen und Begrenzungen

Die folgenden Einschränkungen gelten für das Verhalten, das in der Option gestureHandling zur Verfügung gestellt wird:

  • Nur berührungsempfindliche Geräte: Die Optionen für gestureHandling gelten nur, wenn der Nutzer die Seite auf einem Gerät mit einer Touch-Oberfläche anzeigt.
  • Nur Touch-Ereignisse: Die Optionen für gestureHandling gelten nicht für Maus- oder Stiftereignisse.
  • Nicht für anmeldungsspezifische Karten: Die Optionen für gestureHandling gelten nicht für Karten mit aktivierter Anmeldung.
  • Nicht für Street View: Die Optionen für gestureHandling gelten nicht für den Street View-Dienst.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API