Karten einbetten

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

Maps Embed API-URL erstellen

Hier ist 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 mit Ihrem 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 den Kartenmodus.

URL in einen iFrame einfügen

Wenn Sie die Maps Embed API auf Ihrer Webseite verwenden möchten, legen Sie die von Ihnen erstellte URL als Wert des src-Attributs eines iFrames fest. Die Größe der Karte wird mit den Attributen height und width des iFrames gesteuert, zum Beispiel:

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

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

  • Das Attribut allowfullscreen, um bestimmte Kartenteile im Vollbildmodus anzuzeigen.
  • Die Attribute frameborder="0" und style="border:0", um den Standard-iframe-Rahmen um die Karte zu entfernen.
  • Das Attribut referrerpolicy="strict-origin-when-cross-origin" sorgt dafür, dass der Browser die Domain Ihrer Website als Referer-Header an Google sendet. So können API-Schlüsselbeschränkungen die Anfrage validieren, während Ihre spezifischen Seitenpfade privat bleiben.

Sie können die Größe des iFrames an die Struktur und das Design Ihrer eigenen Website anpassen. Wir haben jedoch festgestellt, dass Besucher in der Regel besser mit größeren Karten interagieren können. Eingebettete Karten werden nicht unterstützt, wenn sie in einer der beiden Dimensionen kleiner als 200 Pixel sind.

Referrer-Informationen und Einschränkungen für API-Schlüssel

Wenn auf der Hosting-Website ein referrer-Meta-Tag auf no-referrer oder same-origin festgelegt ist, sendet der Browser den Referer-Header nicht an Google. Dies kann dazu führen, dass die Anfragen aufgrund Ihrer API-Schlüsseleinschränkung abgelehnt werden. Damit die Einschränkung ordnungsgemäß funktioniert, fügen Sie dem iFrame ein referrerpolicy-Attribut hinzu, wie im Beispiel oben gezeigt, um explizit zuzulassen, dass Referer-Header an Google gesendet werden.

  • strict-origin-when-cross-origin (empfohlen): Es wird nur Ihre Basisdomain (z.B. https://beispiel.de/) an Google gesendet. So bleiben Ihre spezifischen Seitenpfade privat, während die API-Schlüsseleinschränkungen weiterhin funktionieren.
  • no-referrer-when-downgrade (alt): Die gesamte URL wird gesendet, einschließlich bestimmter Seitenpfade und Suchparameter (z.B. https://beispiel.de/kontakt?user=123).

Weitere Informationen zum Referrer-Policy-Header

Kartenmodi auswählen

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

  • place: Zeigt eine Kartenmarkierung an einem bestimmten Ort oder einer bestimmten Adresse an, z. B. an einer Sehenswürdigkeit, einem Unternehmen, einem geografischen Element oder einer Stadt.
  • view: Gibt eine Karte ohne Markierungen oder Wegbeschreibungen zurück.
  • directions: Zeigt den Weg zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und die Reisedauer an.
  • streetview: Zeigt interaktive Panoramaansichten von bestimmten Standorten.
  • search: Zeigt Ergebnisse für eine Suche im sichtbaren Kartenbereich an.

place-Modus

In der folgenden URL wird der Kartenmodus place verwendet, um eine Kartenmarkierung am Eiffelturm anzuzeigen:

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

Es können folgende Parameter verwendet werden:

Parameter Typ Beschreibung Gültige Werte
q Erforderlich Definiert die Position der Kartenmarkierung. URL-maskierter Ortsname, Adresse, Plus Code oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20 beim Maskieren von Leerzeichen. Beispiel: „City Hall, New York, NY“ wird zu City+Hall,New+York,NY oder der Plus Code „849VCWC8+R9“ zu 849VCWC8%2BR9.
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Werte für Breiten- und Längengrad, z. B. 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Die Werte reichen von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache, die für UI-Elemente und für die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länder-Tiles unterstützt. Wenn die angeforderte Sprache für das Tile-Set nicht unterstützt wird, wird die Standardsprache für dieses Tile-Set verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Gegebenheiten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und den bekannten zweistelligen Werten der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

view-Modus

Im folgenden Beispiel werden der Modus view und der optionale Parameter maptype 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

Es können folgende Parameter verwendet werden:

Parameter Typ Beschreibung Gültige Werte
center Erforderlich Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Werte für Breiten- und Längengrad, z. B. 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Die Werte reichen von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache, die für UI-Elemente und für die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länder-Tiles unterstützt. Wenn die angeforderte Sprache für das Tile-Set nicht unterstützt wird, wird die Standardsprache für dieses Tile-Set verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Gegebenheiten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und den bekannten zweistelligen Werten der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

directions-Modus

Im folgenden Beispiel wird der Modus directions verwendet, um die Route zwischen Oslo und Telemark in Norwegen, die Entfernung und die Fahrtzeit anzuzeigen. Dabei werden Mautstraßen und Autobahnen vermieden.

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

Es können folgende Parameter verwendet werden:

Parameter Typ Beschreibung Gültige Werte
origin Erforderlich Definiert den Startpunkt, von dem aus die Wegbeschreibung angezeigt werden soll. URL-codierter Ortsname, Adresse, Plus Code, Breiten-/Längengradkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20 beim Maskieren von Leerzeichen. Beispiel: „City Hall, New York, NY“ wird zu City+Hall,New+York,NY oder der Plus Code „849VCWC8+R9“ zu 849VCWC8%2BR9.
destination Erforderlich Definiert den Endpunkt der Wegbeschreibung. URL-codierter Ortsname, Adresse, Plus Code, Breiten-/Längengradkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20 beim Maskieren von Leerzeichen. Beispiel: „City Hall, New York, NY“ wird zu City+Hall,New+York,NY oder der Plus Code „849VCWC8+R9“ zu 849VCWC8%2BR9.
waypoints Optional Gibt einen oder mehrere Zwischenorte an, über die die Route zwischen Start- und Zielort führen soll. Name, Adresse oder Orts-ID des Ortes. Mehrere Wegpunkte können durch das Pipe-Zeichen (|) getrennt angegeben werden (z.B. Berlin,Germany|Paris,France). Sie können bis zu 20 Wegpunkte angeben.
mode Optional Definiert die Art der Fortbewegung. Wenn kein Modus angegeben ist, werden in der Maps Embed API ein oder mehrere der relevantesten Modi für die angegebene Route angezeigt. driving, walking (bevorzugt Fußwege und Gehwege, sofern verfügbar), bicycling (bevorzugt Routen mit Radwegen und bevorzugten Straßen, sofern verfügbar), transit oder flying.
avoid Optional Gibt Merkmale an, die in Wegbeschreibungen vermieden werden sollen. Routen, die die eingeschränkten Elemente enthalten, werden dadurch nicht ausgeschlossen. Das Ergebnis wird lediglich zugunsten günstigerer Routen beeinflusst. tolls, ferries und/oder highways. Trennen Sie mehrere Werte durch einen senkrechten Strich (z.B. avoid=tolls|highways).
units Optional Gibt die Maßeinheit (metrisch oder imperial) an, die für die Entfernungen in den Ergebnissen verwendet werden soll. Wenn units nicht angegeben ist, bestimmt das origin-Land der Abfrage die zu verwendenden Einheiten. metric oder imperial
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Werte für Breiten- und Längengrad, z. B. 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Die Werte reichen von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache, die für UI-Elemente und für die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länder-Tiles unterstützt. Wenn die angeforderte Sprache für das Tile-Set nicht unterstützt wird, wird die Standardsprache für dieses Tile-Set verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Gegebenheiten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und den bekannten zweistelligen Werten der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den 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 erstellte Photospheres und Street View-Sondersammlungen verfügbar.

Jedes Street View-Panorama bietet eine 360-Grad-Ansicht eines einzelnen Orts. Die Bilder bieten eine 360-Grad-Horizontalsicht (vollständige Rundumsicht) und eine 180-Grad-Vertikalsicht (von senkrecht nach oben bis senkrecht nach unten). Der Modus streetview stellt einen Viewer bereit, mit dem das resultierende Panorama als Kugel mit einer Kamera im Mittelpunkt gerendert wird. Sie können die Kamera bearbeiten, um den Zoom und die Orientierung der Kamera zu steuern.

Hier ein Beispiel für ein Panorama im streetview-Modus:

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 einen Breiten- und einen Längengrad als kommagetrennte Werte (46.414382,10.013988). Die API zeigt das Panorama an, das am nächsten zu diesem Ort aufgenommen wurde. Da Street View-Bilder regelmäßig aktualisiert werden und die Fotos jedes Mal von leicht unterschiedlichen Positionen aufgenommen werden können, kann es sein, dass Ihr Standort bei der Aktualisierung der Bilder einem anderen Panorama zugeordnet wird.

  • pano ist eine bestimmte Panorama-ID. Wenn Sie einen pano angeben, können Sie auch einen location angeben. Die 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 aus an. Wert in Grad von -180° bis 360°
pitch Optional gibt den Winkel der Kamera nach oben oder unten an. Positive Werte neigen die Kamera nach oben, negative Werte nach unten. Die Standardneigung von 0° wird anhand der Position der Kamera bei der Aufnahme des Bildes festgelegt. Aus diesem Grund ist eine Neigung 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. Der Standardwert ist 90°. Bei einem Darstellungsbereich mit fester Größe kann das Sichtfeld als Zoomstufe betrachtet werden, wobei kleinere Zahlen eine höhere Zoomstufe angeben. Wert in Grad, im Bereich von 10° bis 100°
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Werte für Breiten- und Längengrad, z. B. 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Die Werte reichen von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache, die für UI-Elemente und für die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länder-Tiles unterstützt. Wenn die angeforderte Sprache für das Tile-Set nicht unterstützt wird, wird die Standardsprache für dieses Tile-Set verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Gegebenheiten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und den bekannten zweistelligen Werten der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

search-Modus

Im Modus Search werden Ergebnisse für eine Suche im sichtbaren Kartenbereich angezeigt. Es wird empfohlen, einen Ort für die Suche anzugeben. Dazu können Sie entweder einen Ort in den Suchbegriff (record+stores+in+Seattle) aufnehmen oder die Parameter center und zoom verwenden, um die Suche einzugrenzen.

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

Es können folgende Parameter verwendet werden:

Parameter Typ Beschreibung Gültige Werte
q Erforderlich Definiert den Suchbegriff. Sie kann eine geografische Einschränkung enthalten, z. B. in+Seattle oder near+98033.
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Werte für Breiten- und Längengrad, z. B. 37.4218,-122.0840.
zoom Optional Legt die anfängliche Zoomstufe der Karte fest. Die Werte reichen von 0 (die ganze Welt) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert den Typ der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Definiert die Sprache, die für UI-Elemente und für die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher eine Karte in ihrer eigenen Sprache. Dieser Parameter wird nur für einige Länder-Tiles unterstützt. Wenn die angeforderte Sprache für das Tile-Set nicht unterstützt wird, wird die Standardsprache für dieses Tile-Set verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Gegebenheiten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und den bekannten zweistelligen Werten der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

Parameter für Orts-IDs

In der Maps Embed API können Orts-IDs anstelle von Ortsnamen oder Adressen verwendet werden. Orts-IDs sind eine stabile Möglichkeit, einen Ort eindeutig zu identifizieren. Weitere Informationen finden Sie in der Dokumentation zur Places API (New).

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. Im folgenden Code wird die New York City Hall als Startpunkt für eine Routenanfrage angegeben: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • Mit radius wird ein Umkreis in Metern festgelegt, in dem nach einem Panorama gesucht werden soll. Der Mittelpunkt ist dabei der angegebene Breiten- und Längengrad. Gültige Werte sind nicht negative Ganzzahlen. Der Standardwert ist 50.

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

    • Bei default werden die Standardquellen für Street View verwendet. Suchanfragen sind nicht auf bestimmte Quellen beschränkt.
    • outdoor schränkt die Suchanfragen auf Außenansichten ein. Indoor-Sammlungen sind nicht in den Suchergebnissen enthalten. Es kann deshalb vorkommen, dass als Panoramen für den angegebenen Ort keine Außenansichten vorhanden sind. Außerdem werden bei der Suche nur Panoramen zurückgegeben, bei denen festgestellt werden kann, ob es sich um Innen- oder Außenaufnahmen handelt. Beispielsweise werden keine Photo Spheres zurückgegeben, da nicht bekannt ist, ob sie sich im Innen- oder Außenbereich befinden.