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

Anmeldungsspezifische Karten

Wenn Sie für Google Maps JavaScript API eine Anmeldung aktivieren, wird die Anzeige der Karten auf Ihrer Website an den jeweiligen Benutzer angepasst. Benutzer, die an ihrem Google-Konto angemeldet sind, können Orte für die spätere Anzeige über das Internet oder mobile Geräte speichern. Die von einer Karte gespeicherten Karten können mit individuellen Zuordnungen zu Ihrer Website oder App ergänzt werden.

Übersicht

Jedem Besucher Ihrer Site wird eine individuell auf ihn zugeschnittene Google-Karte angezeigt. Sind Benutzer mit ihrem Google-Konto angemeldet, werden die von ihnen gespeicherten Orte, Heimat-und Arbeitsorte direkt in die ihnen angezeigte Karte integriert. Das bedeutet außerdem, das Interaktionen mit der Karte, z. B. die Vergabe von Sternen für einen Standort, gespeichert werden, sodass diese ganz einfach in Google Maps für Desktop-PCs oder mobile Geräte sowie in jeder anderen Google-Karte, die ein Benutzer im Internet aufruft, angezeigt werden können.

Diese benutzerspezifischen Details werden ausschließlich dem angemeldeten Benutzer angezeigt. Sie sind für andere Benutzer Ihrer Anwendung nicht zu sehen und können auch nicht mit der API aufgerufen werden. Nachfolgend ist ein Beispiel einer anmeldungsspezifischen Karte dargestellt. Oben rechts in der Karte befindet sich ein Google-Anmeldefeld oder Ihr Google-Avatar.

Den gesamten Beispielcode können Sie hier anzeigen.

Anmeldung aktivieren

Um die Anmeldung für eine mit Google Maps JavaScript API erstellten Karte zu aktivieren, laden Sie mindestens die Version v3.18 der API mit dem zusätzlichen Parameter signed_in=true.

<script
  src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer>
</script>

Oben rechts in der Karte befindet sich ein Google-Anmeldefeld oder Ihr Google-Avatar.

Benutzer können auf das Anmeldesteuerelement oben rechts in der Karte klicken, um sich mit ihrem Google-Konto anzumelden. Wenn sie sich zuvor für eine andere Eigenschaft bei Google angemeldet haben, sind die Benutzer automatisch an der Karte angemeldet.

Speichern mit Zuordnungen

Dieses Steuerelement ermöglicht Benutzern, Standorte, die ihnen wichtig sind, in Google Maps zu speichern. Gespeicherte Orte werden dem Benutzer in anderen Google Maps angezeigt, wenn er diese im Internet oder auf mobilen Geräten aufruft. Wenn ein Benutzer einen Ort aus einem SaveWidget oder InfoWindow speichert, können Sie personalisierte Zuordnungen und Links zurück zu Ihrer Anwendung ergänzen.

Sie haben zwei Möglichkeiten, um die Funktion zum Speichern mit Zuordnungen zu aktivieren:

  • Fügen Sie Informationen zum Ort (place) zu einem Marker hinzu, um das Speichern von einem InfoWindow zu ermöglichen, das an diesem Marker verankert ist.
  • Erstellen Sie ein benutzerdefiniertes SaveWidget.

Die Orte können dann zu einem späteren Zeitpunkt durch Auswählen eines gespeicherten Ortes auf der Karte aufgerufen werden.

„Save to Google Maps“ mit einem Info-Fenster

Fügen Sie Informationen zu einem Ort auf einem Marker hinzu, um ein Steuerelement „Save to Google Maps“ in Info-Standardfenster zu aktivieren. Dieses Steuerelement wird automatisch zu jedem beliebigen Info-Fenster, das mit diesem Marker verbunden ist, hinzugefügt. Sie können das Speichern um eine Zuordnung zu Ihrer App ergänzen, um es den Benutzern zu erleichtern, die ursprüngliche Quelle im Gedächtnis zu behalten.

So aktivieren Sie „Save to Google Maps“ aus einem Info-Fenster:

  1. Erstellen Sie einen neuen Marker.
  2. Geben Sie in den MarkerOptions, die Eigenschaften map, place und attribution an. Beachten Sie, dass die Eigenschaft position nicht erforderlich ist, wenn das Objekt place angegeben ist.
  3. Definieren Sie im Objekt place den Wert location und einen der folgenden Werte:
    • placeId zur eindeutigen Identifizierung eines Ortes. Weitere Informationen finden Sie unter Erstellen von Verweisen auf Orte mit einer Orts-ID.
    • Eine Abfragezeichenfolge (query) für die Suche in der Nähe des Standortes (location). Suchzeichenfolgen sollten so spezifisch wie möglich sein. Beispiel: 'stanley park vancouver bc canada'.
  4. Geben Sie im Objekt attribution Folgendes an:
    • Die Quelle (source) des Speichervorgangs. In der Regel Ihre Website oder App.
    • Eine optionale webUrl, die als Link zurück zu Ihrer Website eingefügt werden kann.
    • Eine optionale ID iosDeepLinkId, angegeben als URL-Schema, die anstelle der webUrl angezeigt wird, wenn die App mit iOS ausgeführt wird.
  5. Erstellen Sie ein neues InfoWindow.
  6. Fügen Sie einen Event-Listener hinzu, um das InfoWindow bei einem Klick auf den Marker zu öffnen.

Dadurch wird eine Option „Save to Google Maps“ aktiviert, wenn ein Kick auf den Marker erfolgt.

Im nachfolgenden Beispiel ist dargestellt, wie eine Abfragezeichenfolge (query) für die Suche nach einem Standort verwendet wird.

Den gesamten Beispielcode können Sie hier anzeigen.

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

„Save to Google Maps“ mit SaveWidget

Sie können das Steuerelement SaveWidget verwenden, um eigene Benutzeroberflächen zum Speichern von Orten zu erstellen. Wenn Sie das Steuerelement SaveWidget verwenden, können Sie zusätzliche Zuordnungsdaten angeben, damit sich der Benutzer daran erinnert, über welche App/Website er den Ort gespeichert hat und damit er problemlos zu Ihrer App zurückkehren kann.

Verfahren Sie wie folgt, um ein Element SaveWidget zu Ihrer App hinzuzufügen.

  1. Fügen Sie ein Element div zu einer Seite mit einer Google-Karte hinzu.
  2. Kennzeichnen Sie den zu speichernden Ort mit einem Marker, damit der Benutzer weiß, welcher Ort gespeichert wird.
  3. Erstellen Sie ein Objekt SaveWidgetOptions, das ein Objektliteral place und attribution enthält.
  4. Erstellen Sie ein neues Objekt SaveWidget, mit dem der Wert div und die hinzugefügten Optionen übergeben werden.

Das nachfolgende Beispiel zeigt ein „SaveWidget“ zum Speichern des Google-Standorts in Sydney. In diesem Beispiel erstellen wir das Element div außerhalb der Kartenleinwand und verwenden anschließend die Google Maps JavaScript API, um das Element div als Steuerelement hinzuzufügen.

Den gesamten Beispielcode können Sie hier anzeigen.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <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;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API