Es kann losgehen!

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

Die Google Maps Embed 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 Embed API aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Google Maps Embed API

Übersicht

Mit Google Maps Embed API können Sie eine interaktive Karte oder ein Street View-Panorama mithilfe einer einfachen HTTP-Anforderung auf Ihrer Website platzieren. Sie können sie einfach in Ihre Webseite oder Ihren Blog einbetten, indem Sie die Google Maps Embed API-URL als Attribut src im IFrame festlegen:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Individuell maßgeschneiderte Karte

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, dass Interaktionen mit der Karte, z. B. die Vergabe von Sternen für einen Standort, gespeichert werden. Damit können diese ganz einfach in Google Maps für Desktop-PCs oder mobile Geräte angezeigt werden.

Diese benutzerspezifischen Details sind für andere Nutzer nicht sichtbar. Jedem Benutzer wird eine eigens für diesen maßgeschneiderte Karte angezeigt.

Einfaches Einbetten

Google Maps Embed API-Karten lassen sich problemlos zu Ihrer Webseite hinzufügen – dazu legen Sie einfach die erstellte URL als Wert für das Attribut src im IFrame fest. Die Größe der Karte steuern Sie im IFrame mit den Attributen height und width. JavaScript ist nicht erforderlich.

Keine Nutzungsbeschränkungen

Für Google Maps Embed API sind keine Nutzungsbeschränkungen vorhanden. Sie können Karten oder Street View-Panoramen auf Ihren Websites mit hohem Datenverkehr einbetten, ohne befürchten zu müssen, eine Nutzungsgrenze zu erreichen oder auf eine Abfrage pro Sekunde gedrosselt zu werden.

Werbung auf der Karte

Bei Google Maps Embed API kann Werbung auf der Karte enthalten sein. Das Werbeformat sowie die angezeigte Werbung kann ohne vorherige Benachrichtigung für jede Karte geändert werden.

URL erstellen

Die URL für eine Google Maps Embed API-Anforderung lautet wie folgt:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Hierbei gilt:

  • {MODE} ist entweder place, directions, search, view oder streetview.
  • {YOUR_API_KEY} ist Ihr kostenfreier API-Schlüssel.
  • parameters umfassen sowohl optionale Parameter als auch modusbezogene Parameter.

API-Schlüssel

Alle an Google Maps Embed API gerichteten Anforderungen müssen als Wert des Parameters key einen kostenfreien API-Schlüssel enthalten. Mit Ihrem Schlüssel können Sie die Nutzung von Maps API durch die Anwendung überwachen. Zudem wird so gewährleistet, dass Google Sie ggf. in Bezug auf Ihre Website/Anwendung kontaktieren kann.



Für die ersten Schritte bei der Verwendung von Google Maps Embed API klicken Sie auf die folgende Schaltfläche, wodurch die Google Maps Embed API automatisch aktiviert und ein API-Schlüssel angefordert wird.

Schlüssel anfordern

Alternativ können Sie auch wie folgt einen API-Schlüssel anfordern:

  1. Navigieren Sie zu Google API Console.
  2. Ein Projekt erstellen oder auswählen
  3. Klicken Sie auf Continue, um die API zu aktivieren.
  4. Fordern Sie auf der Seite Credentials einen API-Schlüssel an (und legen Sie die Einschränkungen für den API-Schlüssel fest).
    Hinweis: Wenn Sie bereits über einen API-Schlüssel ohne Einschränkungen oder einen Schlüssel mit Browsereinschränkungen verfügen, können Sie diesen Schlüssel verwenden.
  5. Wir empfehlen, Ihren API-Schlüssel anhand der folgenden bewährten Methoden zu schützen.


In der Google API Console können Sie auch einen vorhandenen Schlüssel suchen oder eine Liste aktivierter APIs ansehen.

Weitere Informationen zur Verwendung der Google API Console finden Sie in der Hilfe zur API Console.

Einschränkungstypen für API-Schlüssel

Google Maps APIs sind für Android- oder iOS-Apps, Webbrowser und über HTTP-Webdienste verfügbar. Ein generischer (nicht eingeschränkter) API-Schlüssel kann für APIs auf jeder beliebigen Plattform verwendet werden. Optional können Sie dem API-Schlüssel eine Einschränkung hinzufügen (zum Beispiel den HTTP-Referrer). Nach der Einschränkung funktioniert der Schlüssel nur auf Plattformen, die den jeweiligen Einschränkungstyp unterstützen. Weitere Infos zu Schlüsseln und Anmeldedaten.

Kartenmodi

Ihnen stehen vier Modi für die Karteneinbettung zur Verfügung. Der jeweilige Modus wird in der Anforderungs-URL angegeben.

Modus „Place“

Mit dem Modus Place wird eine bestimmte Stelle oder Adresse auf der Karte durch eine Pinnnadel gekennzeichnet, wie z. B. Sehenswürdigkeit, Geschäft, geografische Gegebenheit oder Stadt.

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Folgender URL-Parameter wird benötigt:

  • q legt den auf der Karte hervorzuhebenden Ort fest. Ein Standort wird als Ortsname, Adresse oder Orts-ID akzeptiert. Die Zeichenfolge sollte mit einem URL-Escape-Zeichen versehen werden, damit eine Adresse wie „City Hall, New York, NY“ in City+Hall,New+York,NY konvertiert wird. (Von Google Maps Embed API wird als Escape-Zeichen für Leerzeichen sowohl + als auch %20 unterstützt.) Den Orts-IDs sollte place_id: vorangestellt werden.

Speichern mit Zuordnungsinformationen

Ein Benutzer, der mit seinem Google-Konto angemeldet ist, kann den vom Parameter q spezifizierten Ort speichern. Gespeicherte Orte werden auf anderen Google-Karten im Internet oder auf mobilen Geräten angezeigt. Standardmäßig enthalten Orte, die über eine eingebettete Karte gespeichert wurden, Informationen zur Zuordnung (attribution). So können sich die Benutzer daran erinnern, wo sie waren, als sie diesen Ort speicherten. Diese Zuordnungsinformationen können Sie mit den folgenden Parametern personalisieren.

  • attribution_source gibt an, dass der Speichervorgang für Ihre Site oder App erfolgt. Sie müssen ein benutzerdefiniertes Objekt attribution_source einbinden, bevor Sie entweder attribution_web_url oder attribution_ios_deep_link_id festlegen. Standardmäßig ist dies der URL-Pfad der Seite, auf der die Karte angezeigt wird, z. B.: https://example.com/path/
  • attribution_web_url gibt einen Link zurück zu Ihrer Website an. Wenn attribution_source nicht angegeben wird, gilt für attribution_web_url standardmäßig die URL, auf der die eingebettete Karte angezeigt wird, z. B.: https://example.com/path/page.html
  • attribution_ios_deep_link_id gibt ein URL-Schema an, das einen Deep-Link für eine iOS-Anwendung bereitstellt. Erfolgt die Anzeige in Google Maps for iOS, wird attribution_ios_deep_link_id anstelle von attribution_web_url angezeigt.

Im folgenden Beispiel wird eine Pinnadel für das Empress Hotel in Victoria, British Columbia angezeigt. Beim Speichern dieses Standorts wird der Speichervorgang „Google Maps Embed API“ zugeordnet. Die Zuordnung wird als URL dargestellt. In diesem Beispiel wird das Google Maps URL-Schema verwendet, um den iOS-Benutzern Wegbeschreibungen anzuzeigen.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Modus „Directions“

Mit dem Modus Directions werden der Weg zwischen zwei (oder mehr) angegebenen Punkten auf der Karte, die Entfernung und die Reisezeit angezeigt.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Folgende URL-Parameter werden benötigt:

  • origin definiert den Startpunkt, von dem aus die Wegbeschreibungen angezeigt werden. Der Wert kann ein Ortsname, eine Adresse oder die Orts-ID sein. Die Zeichenfolge sollte mit einem URL-Escape-Zeichen versehen werden, damit eine Adresse wie „City Hall, New York, NY“ in City+Hall,New+York,NY konvertiert wird. (Von Google Maps Embed API wird als Escape-Zeichen für Leerzeichen sowohl + als auch %20 unterstützt.) Den Orts-IDs sollte place_id: vorangestellt werden.
  • destination definiert den Endpunkt der Wegbeschreibungen.

Folgende URL-Parameter sind optional:

  • waypoints gibt an, ob es einen oder mehrere Zwischenhalte gibt, die in die Wegbeschreibung zwischen Start und Ziel einbezogen werden sollen. Mehrere Wegpunkte geben Sie an, indem Sie die verschiedenen Orte durch einen senkrechten Strich (|) trennen (z. B. Berlin,Germany|Paris,France). Sie können bis zu 20 Wegpunkte angeben. Dabei kann jeder Wegpunkt ein Ortsname, eine Adresse oder eine Orts-ID sein.
  • mode legt das Verkehrsmittel fest. Als Optionen stehen driving, walking (unter Berücksichtigung von Fußwegen, sofern vorhanden), bicycling (unter Nutzung von Fahrradwegen und bevorzugten Straßen, sofern vorhanden), transit oder flying zur Verfügung. Falls kein Modus angegeben ist, wird von Google Maps Embed API mindestens einer der wichtigsten Modi für die ausgewählte Route abgebildet.
  • avoid weist Google Maps an, tolls, ferries und/oder highways zu vermeiden. Mehrere Werte werden durch den senkrechten Strich getrennt (z. B. avoid=tolls|highways). Beachten Sie, das dadurch Routen mit der zu vermeidenden Eigenschaft nicht ausgeschlossen, sondern lediglich günstigere Routen als Ergebnis bevorzugt werden.
  • units nutzt entweder die Maßeinheit metric oder imperial, um Entfernungen im Ergebnis anzugeben. Wird units nicht spezifiziert, wird über den Parameter origin das Land, aus dem die Abfrage stammt, zur Festlegung der zu verwendenden Maßeinheit herangezogen.

Mit dem Modus Search werden Suchergebnisse für die sichtbare Kartenregion angezeigt. Es wird empfohlen, einen Standort für die Suche zu definieren, und zwar entweder durch die Einbindung eines Standorts in den Suchbegriff (record+stores+in+Seattle) oder durch die Einbindung der Parameter center und zoom zur Begrenzung der Suche.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Folgender URL-Parameter wird benötigt:

  • q gibt den Suchbegriff an. Dabei kann es sich um eine geografische Einschränkung handeln, z. B. in+Seattle oder near+98033.

Modus „View“

Im Modus View wird eine Karte ohne Kennzeichnungen oder Wegbeschreibungen zurückgegeben.

Im folgenden Beispiel wird der optionale Parameter maptype zur Darstellung einer Satellitenansicht der Karte verwendet.

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Folgender URL-Parameter wird benötigt:

  • center definiert den Mittelpunkt des Kartenfensters; der Parameter akzeptiert durch Komma getrennte Längengrad- und Breitengradangaben (-33.8569,151.2152).

Optionale Parameter

Die folgenden Parameter können mit jedem der oben aufgeführten Kartenmodi verwendet werden.

  • center definiert den Mittelpunkt der Kartenansicht. Der Parameter akzeptiert durch Komma getrennte Längengrad- und Breitengradangaben (wie z. B. 37.4218,-122.0840).

  • zoom legt die anfängliche Vergrößerungsstufe der Karte fest. Zulässige Werte sind zwischen 0 (die ganze Welt) und 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren Kartendaten für den ausgewählten Standort variieren.

  • maptype kann entweder auf roadmap (Standard) oder satellite festgelegt werden und definiert den Typ der zu ladenden Kacheln mit Karten.

  • language gibt an, in welcher Sprache die Elemente der Benutzeroberfläche und die Bezeichnungen auf den Kacheln mit Karten angezeigt werden sollen. Beachten Sie, dass dieser Parameter nur für einige Länderkacheln unterstützt wird. Falls keine Unterstützung der angegebenen Sprache für diesen Kachelsatz vorhanden ist, wird die Standardsprache für diesen Kachelsatz verwendet. Standardmäßig sehen die Benutzer eine Karte in ihrer eigenen Sprache.

  • region definiert auf Basis von geopolitischen Aspekten die jeweils anzuzeigenden Grenzen und Bezeichnungen. Für den Parameter ist ein Regionscode aus zwei Zeichen ccTLD (Top-Level-Domain) zulässig.

Parameter für die Orts-ID

Von Google Maps Embed API wird die Verwendung von Orts-IDs (anstelle eines Ortsnamens oder einer Adresse) unterstützt. Orts-IDs sind gut für die eindeutige Identifizierung eines Orts geeignet. Weitere Informationen über die Ermittlung und Verwendung von Orts-IDs finden Sie in der Dokumentation für Google Places API.

Von Google Maps Embed API werden Orts-IDs für die folgenden URL-Parameter akzeptiert:

  • q

  • origin

  • destination

  • waypoints

Zur Verwendung einer Orts-ID muss zunächst der Präfix place_id: vorangestellt werden. Mit dem folgenden Code wird „New York City Hall“ als Startpunkt für eine Wegbeschreibung angegeben: request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Modus „Street View“

Mit Google Maps Embed API können Sie Street View-Bilder auf Ihrer Website oder in Ihrem Blog als interaktive Panoramen anzeigen. Google Street View stellt Panoramen von verschiedenen Standorten im gesamten Abdeckungsbereich zur Verfügung. Von Benutzern bereitgestellte Panoramen, und spezielle Street View-Kollektionen sind ebenfalls verfügbar.

Jedes Street View-Panorama bietet eine 360-Grad-Ansicht eines einzelnen Standorts. Die Bilder liefern eine 360-Grad-Horizontalsicht (eine volle Drehung) und eine 180-Grad-Vertikalsicht (von senkrecht oben bis senkrecht unten). Der Modus streetview verfügt über ein Anzeigeprogramm, mit dem das Panorama als Kugel mit einer Kamera in ihrem Mittelpunkt wiedergegeben wird. Sie können die Kamera bearbeiten, um den Zoom und die Ausrichtung der Kamera zu steuern.

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Einer der folgenden URL-Parameter wird benötigt:

  • location akzeptiert durch Komma getrennte Längengrad- und Breitengradangaben (46.414382,10.013988). Von der API wird das Panorama angezeigt, das am dichtesten bei diesem Standort aufgenommen wurde. Da die Street View-Bilder regelmäßig aktualisiert werden und möglicherweise jedes Mal Aufnahmen aus leicht unterschiedlichen Positionen erstellt werden, kann der gewählte Standort bei einer Bildaktualisierung zu einer anderen Panoramaansicht wechseln.

  • pano ist eine spezifische Panorama-ID. Wenn Sie pano angeben, sollten Sie auch location angeben. Der Parameter location wird nur verwendet, falls die API keine Panorama-ID findet.

Folgende URL-Parameter sind optional:

  • heading gibt die Kompassausrichtung der Kamera an, und zwar in Grad im Uhrzeigersinn von Norden. Zulässige Werte sind zwischen -180° bis 360°.

  • pitch gibt den Winkel (nach oben oder nach unten) der Kamera an. Der Parameter pitch wird in Grad von -90° bis 90° angegeben. Positive Werte führen zu einem nach oben gerichteten Kamerawinkel, negative Werte zu einem nach unten gerichteten Kamerawinkel. Der Standardneigungswinkel von 0° wird auf Basis der Kameraposition bei der Bildaufnahme festgelegt. Daher ist ein Neigungswinkel von 0° häufig, aber keineswegs immer, horizontal. Beispielsweise wird ein Bild, das auf einem Berg aufgenommen wurde, vermutlich einen Neigungswinkel haben, der nicht horizontal ist.

  • fov legt das horizontale Sichtfeld des Bilds fest. Das Sichtfeld wird in Grad in einem Bereich von 10° bis 100° angegeben. Der Standardwert liegt bei 90°. Bei einem Viewport mit fester Größe entspricht das Sichtfeld der Vergrößerungsstufe, kleinere Angaben weisen auf eine höhere Vergrößerungsstufe hin.

  • language gibt die zu verwendende Sprache für Elemente der Benutzeroberfläche und Bezeichnungen an. Standardmäßig sehen die Benutzer die Elemente der Benutzeroberfläche in ihrer eigenen Sprache.

  • region definiert auf Basis von geopolitischen Aspekten die jeweils anzuzeigenden Grenzen und Bezeichnungen. Für den Parameter ist ein Regionscode aus zwei Zeichen ccTLD (Top-Level-Domain) zulässig.

Karte einbetten

Wenn Sie Google Maps Embed API auf Ihrer Webseite verwenden möchten, legen Sie die erstellte URL als Wert für das Attribut src im IFrame fest. Die Größe der Karte steuern Sie im IFrame mit den Attributen height und width:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Tipp: Fügen Sie „allowfullscreen“ zu den IFrame-Eigenschaften hinzu, damit bestimmte Kartensegmente als Vollbild angezeigt werden können. Tipp: Mit den Eigenschaften frameborder="0" und style="border:0" können Sie den IFrame-Standardrahmen um die Karte herum entfernen.

Dann können Sie die Größe des IFrame an die Struktur und das Design Ihrer eigenen Website anpassen. Es hat sich herausgestellt, dass Benutzer die Interaktion mit größeren Karten bevorzugen. Beachten Sie, dass einbettete Karten, die weniger als 200 Pixel pro Richtung aufweisen, nicht unterstützt werden.

Feedback geben zu...

Google Maps Embed API
Google Maps Embed API