Eine Karte einbetten

In diesem Leitfaden erfahren Sie, wie Sie eine interaktive Karte in Ihre Webseite einbetten.

Maps Embed API-URL erstellen

Im Folgenden finden Sie eine Beispiel-URL, über die die Maps Embed API geladen wird:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Ersetzen Sie:

  • MAP_MODE durch den Kartenmodus.
  • YOUR_API_KEY durch Ihren API-Schlüssel. Weitere Informationen finden Sie unter API-Schlüssel abrufen.
  • PARAMETERS durch die erforderlichen und optionalen Parameter für Ihren Kartenmodus.

URL zu einem iFrame hinzufügen

Wenn du die Maps Embed API auf deiner Webseite verwenden möchtest, lege die URL, die du erstellt hast, als Wert des src-Attributs eines iFrames fest. Mit den Attributen height und width des iFrames lässt sich die Größe der Karte steuern. Beispiel:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

Im obigen iFrame-Beispiel werden die zusätzlichen Properties verwendet:

  • Die allowfullscreen-Eigenschaft, damit bestimmte Kartenteile im Vollbildmodus angezeigt werden.
  • Die Properties frameborder="0" und style="border:0", um den standardmäßigen iFrame-Rand um die Karte zu entfernen.
  • Das Attribut referrerpolicy="no-referrer-when-downgrade", damit der Browser die vollständige URL als Referer-Header mit der Anfrage senden kann, damit die API-Schlüsseleinschränkungen korrekt funktionieren.

Sie können die Größe des iFrames an die Struktur und das Design Ihrer eigenen Website anpassen. Wir haben jedoch festgestellt, dass es für Besucher einfacher ist, mit größeren Karten zu interagieren. Eingebettete Karten werden bei einer Größe von maximal 200 Pixeln nicht unterstützt.

Einschränkungen für API-Schlüssel

Wenn das referrer-Meta-Tag auf der Hostwebsite auf no-referrer oder same-origin gesetzt ist, sendet der Browser den Header Referer nicht an Google. Dies kann dazu führen, dass Ihre API-Schlüsseleinschränkung die Anfragen ablehnt. Damit die Einschränkung richtig funktioniert, musst du dem iFrame wie im Beispiel oben die Property referrerpolicy hinzufügen, damit explizit Referer-Header an Google gesendet werden können.

Anzeigen auf der Karte

Die Maps Embed API kann auch Werbung auf der Karte enthalten. Das Anzeigenformat und die Reihe der Anzeigen, die auf einer Karte zu sehen sind, können ohne Vorankündigung geändert werden.

Kartenmodi auswählen

Sie können einen der folgenden Kartenmodi in Ihrer Anfrage-URL verwenden:

  • place: Angezeigt wird eine Kartenmarkierung an einem bestimmten Ort, einer bestimmten Adresse, z. B. einer Sehenswürdigkeit, einem Unternehmen, einem geografischen Merkmal oder einer Stadt.
  • view: Gibt eine Karte ohne Markierungen oder Wegbeschreibungen zurück.
  • directions: Zeigt den Pfad zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und die Reisezeit an.
  • streetview: zeigt interaktive Panoramaansichten von bestimmten Orten an
  • search: Zeigt Ergebnisse für eine Suche in der sichtbaren Kartenregion an.

place-Modus

Die folgende URL verwendet den Kartenmodus place, um eine Kartenmarkierung im Eiffelturm anzuzeigen:

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

Sie können folgende Parameter verwenden:

Parameter Typ Beschreibung Gültige Werte
q Erforderlich Definiert die Position der Kartenmarkierung. Ortsname, Adresse, Plus Code oder Orts-ID mit URL-Escape-Zeichen. Die Maps Embed API unterstützt bei der Maskierung von Leerzeichen sowohl + als auch %20. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY um oder geben Sie „849VCWC8+R9“ in 849VCWC8%2BR9 ein.
center Optional Definiert die Mitte der Kartenansicht. Akzeptiert durch Komma getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Werte von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Das obere Limit kann je nach Kartendaten für den ausgewählten Standort variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache für UI-Elemente und die Anzeige von Labels auf Kartenkacheln. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. Wenn die gewünschte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert basierend auf geopolitischen Aspekten die anzuzeigenden Grenzen und Beschriftungen. Akzeptiert einen Regionscode, der als zweistelliger (nicht numerischer) Subcode-Regions-Subtag angegeben ist, der den aus zwei Zeichen bestehenden bekannten ccTLD-Werten ("Top-Level-Domain") entspricht. Informationen zu unterstützten Regionen finden Sie unter Details zur Google Maps Platform-Abdeckung.

view-Modus

Im folgenden Beispiel werden der view-Modus und der optionale maptype-Parameter verwendet, um eine Satellitenansicht der Karte anzuzeigen:

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

Sie können folgende Parameter verwenden:

Parameter Typ Beschreibung Gültige Werte
center Erforderlich Definiert die Mitte der Kartenansicht. Akzeptiert durch Komma getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Werte von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Das obere Limit kann je nach Kartendaten für den ausgewählten Standort variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache für UI-Elemente und die Anzeige von Labels auf Kartenkacheln. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. Wenn die gewünschte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert basierend auf geopolitischen Aspekten die anzuzeigenden Grenzen und Beschriftungen. Akzeptiert einen Regionscode, der als zweistelliger (nicht numerischer) Subcode-Regions-Subtag angegeben ist, der den aus zwei Zeichen bestehenden bekannten ccTLD-Werten ("Top-Level-Domain") entspricht. Informationen zu unterstützten Regionen finden Sie unter Details zur Google Maps Platform-Abdeckung.

directions-Modus

Im folgenden Beispiel wird der Modus directions verwendet, um den Pfad zwischen Oslow und Telemark, Norwegen, Entfernung und Fahrzeit anzuzeigen, sodass Mautstraßen und Autobahnen vermieden werden.

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

Sie können folgende Parameter verwenden:

Parameter Typ Beschreibung Gültige Werte
origin Erforderlich Definiert den Startpunkt, ab dem die Route angezeigt werden soll. Ortsname, Adresse mit Plus- und Esscode sowie Koordinaten (Breiten- und Längengrad) oder Orts-ID. Die Maps Embed API unterstützt bei der Maskierung von Leerzeichen sowohl + als auch %20. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY um oder geben Sie „849VCWC8+R9“ in 849VCWC8%2BR9 ein.
destination Erforderlich Definiert den Endpunkt der Route. Ortsname, Adresse mit Plus- und Esscode sowie Koordinaten (Breiten- und Längengrad) oder Orts-ID. Die Maps Embed API unterstützt bei der Maskierung von Leerzeichen sowohl + als auch %20. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY um oder geben Sie „849VCWC8+R9“ in 849VCWC8%2BR9 ein.
waypoints Optional Gibt einen oder mehrere Zwischenstellen an, um Wegbeschreibungen zwischen Start- und Zielort zu leiten. Ortsname, Adresse oder Orts-ID. Sie können mehrere Wegpunkte angeben, indem Sie sie durch einen senkrechten Strich (|) trennen (z.B. Berlin,Germany|Paris,France). Sie können bis zu 20 Wegpunkte angeben.
mode Optional Definiert die Mobilitätsform. Wenn kein Modus festgelegt ist, wird in der Maps Embed API einer oder mehrere der relevantesten Modi für die angegebene Route angezeigt. driving, walking (wo Fußgängerwege und Bürgersteige bevorzugt werden, falls verfügbar), bicycling (die Routen über Radwege und bevorzugte Straßen, falls verfügbar), transit oder flying.
avoid Optional Gibt Funktionen an, die in Wegbeschreibungen vermieden werden sollen. Routen mit eingeschränkten Funktionen werden dadurch nicht ausgeschlossen. Das Ergebnis wird dann im Hinblick auf günstigere Routen gewichtet. tolls, ferries und/oder highways. Trennen Sie mehrere Werte durch einen senkrechten Strich (z.B. avoid=tolls|highways).
units Optional Gibt die Messmethode, den metrischen oder angloamerikanischen Wert beim Anzeigen von Entfernungen in den Ergebnissen an. Wenn units nicht angegeben sind, bestimmt das Land origin der Abfrage die zu verwendenden Einheiten. metric oder imperial
center Optional Definiert die Mitte der Kartenansicht. Akzeptiert durch Komma getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Werte von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Das obere Limit kann je nach Kartendaten für den ausgewählten Standort variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache für UI-Elemente und die Anzeige von Labels auf Kartenkacheln. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. Wenn die gewünschte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert basierend auf geopolitischen Aspekten die anzuzeigenden Grenzen und Beschriftungen. Akzeptiert einen Regionscode, der als zweistelliger (nicht numerischer) Subcode-Regions-Subtag angegeben ist, der den aus zwei Zeichen bestehenden bekannten ccTLD-Werten ("Top-Level-Domain") entspricht. Informationen zu unterstützten Regionen finden Sie unter Details zur Google Maps Platform-Abdeckung.

streetview-Modus

Mit der Maps Embed API können Sie Street View-Bilder als interaktive Panoramen von bestimmten Orten im Abdeckungsbereich anzeigen lassen. Außerdem sind von Nutzern bereitgestellte 360°-Panoramaaufnahmen und besondere Street View-Sammlungen verfügbar.

Jedes Street View-Panorama bietet eine 360°-Ansicht eines einzelnen Orts. Die Bilder haben eine horizontale Ansicht von 360 Grad (eine vollständige Rundumansicht) und eine vertikale Ansicht von 180 Grad (senkrecht nach oben und unten). Im Modus streetview ist ein Betrachter verfügbar, der das Panorama als Kugel mit einer Kamera in der Mitte rendert. Sie können die Kamera bearbeiten, um den Zoom und die Ausrichtung der Kamera zu steuern.

Sehen Sie sich das folgende Panorama im streetview-Modus an:

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 ist erforderlich:

  • location akzeptiert Breiten- und Längengrade als durch Kommas getrennte Werte (46.414382,10.013988). In der API wird dann das Panorama angezeigt, das dem Ort am nächsten ist. Da Street View-Bilder regelmäßig aktualisiert werden und die Fotos jedes Mal an leicht unterschiedlichen Positionen aufgenommen werden, kann es passieren, dass Ihr Standort bei einer Aktualisierung der Bilder an ein anderes Panorama ausgerichtet wird.

  • pano ist eine spezifische Panorama-ID. Wenn Sie einen pano angeben, können Sie auch einen location angeben. Der location wird nur verwendet, wenn die API die Panorama-ID nicht finden kann.

Folgende URL-Parameter sind optional:

Parameter Typ Beschreibung Gültige Werte
heading Optional Gibt die Kompassrichtung der Kamera in Grad im Uhrzeigersinn von Norden an. Wert in Grad von -180° bis 360°
pitch Optional gibt den Winkel nach oben oder unten an. Positive Werte versetzen den Winkel der Kamera nach oben, negative Werte dagegen nach unten. Die Standardneigung von 0° richtet sich nach der Position der Kamera, als das Bild aufgenommen wurde. Aus diesem Grund ist ein Neigungswinkel von 0° oft, aber nicht immer, horizontal. So ist beispielsweise bei Bildern, die auf einem Hügel aufgenommen wurden, die Standardneigung wahrscheinlich nicht horizontal. Wert in Grad von -90° bis 90°
fov Optional bestimmt das horizontale Sichtfeld des Bildes. Die Standardeinstellung ist 90°. Wenn du einen Darstellungsbereich mit fester Größe verwendest, kann das Sichtfeld auf die Zoomstufe angewendet werden. Kleinere Zahlen bedeuten eine höhere Zoomstufe. Wert in Grad mit einem Bereich von 10 bis 100°
center Optional Definiert die Mitte der Kartenansicht. Akzeptiert durch Komma getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Werte von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Das obere Limit kann je nach Kartendaten für den ausgewählten Standort variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache für UI-Elemente und die Anzeige von Labels auf Kartenkacheln. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. Wenn die gewünschte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert basierend auf geopolitischen Aspekten die anzuzeigenden Grenzen und Beschriftungen. Akzeptiert einen Regionscode, der als zweistelliger (nicht numerischer) Subcode-Regions-Subtag angegeben ist, der den aus zwei Zeichen bestehenden bekannten ccTLD-Werten ("Top-Level-Domain") entspricht. Informationen zu unterstützten Regionen finden Sie unter Details zur Google Maps Platform-Abdeckung.

search-Modus

Im Search-Modus werden Ergebnisse für eine Suche im sichtbaren Kartenbereich angezeigt. Es wird empfohlen, einen Standort für die Suche zu definieren, indem Sie entweder einen Standort in den Suchbegriff (record+stores+in+Seattle) einfügen oder einen center- und einen zoom-Parameter angeben, um die Suche zu binden.

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

Sie können folgende Parameter verwenden:

Parameter Typ Beschreibung Gültige Werte
q Erforderlich Definiert den Suchbegriff. Sie kann eine geografische Einschränkung wie in+Seattle oder near+98033 enthalten.
center Optional Definiert die Mitte der Kartenansicht. Akzeptiert durch Komma getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Werte von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Das obere Limit kann je nach Kartendaten für den ausgewählten Standort variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache für UI-Elemente und die Anzeige von Labels auf Kartenkacheln. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. Wenn die gewünschte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert basierend auf geopolitischen Aspekten die anzuzeigenden Grenzen und Beschriftungen. Akzeptiert einen Regionscode, der als zweistelliger (nicht numerischer) Subcode-Regions-Subtag angegeben ist, der den aus zwei Zeichen bestehenden bekannten ccTLD-Werten ("Top-Level-Domain") entspricht. Informationen zu unterstützten Regionen finden Sie unter Details zur Google Maps Platform-Abdeckung.

Orts-ID-Parameter

Die Maps Embed API unterstützt die Verwendung von Orts-IDs anstelle der Angabe eines Ortsnamens oder einer Adresse. Orts-IDs sind eine stabile Möglichkeit, einen Ort eindeutig zu identifizieren. Weitere Informationen finden Sie in der Dokumentation zur Google Places API.

Die Maps Embed API akzeptiert Orts-IDs für die folgenden URL-Parameter:

  • q
  • origin
  • destination
  • waypoints

Wenn Sie eine Orts-ID verwenden möchten, müssen Sie zuerst das Präfix place_id: hinzufügen. Mit dem folgenden Code wird die New York City Hall als Ausgangspunkt für eine Routenanfrage angegeben: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius legt einen Umkreis in Metern fest, in dem nach einem Panorama gesucht werden soll. Der Mittelpunkt ist dabei der angegebene Längen- und Breitengrad. Gültige Werte sind nicht negative Ganzzahlen. Der Standardwert ist 50.

  • source beschränkt die Street View-Suche auf ausgewählte Quellen. Gültige Werte sind:

    • default verwendet die Standardquellen für Street View. Suchanfragen sind nicht auf bestimmte Quellen beschränkt.
    • outdoor schränkt die Suchanfragen auf Außenansichten ein. Indoor-Sammlungen werden nicht in die Suchergebnisse aufgenommen. Für den angegebenen Ort sind unter Umständen keine Außenansichten vorhanden. Beachten Sie außerdem, dass bei der Suche nur Panoramen zurückgegeben werden, bei denen ermittelt werden kann, ob sie sich im Innen- oder Außenbereich befinden. PhotoSphere-Panoramen werden beispielsweise nicht zurückgegeben, da nicht bekannt ist, ob sie sich im Innen- oder Außenbereich befinden.