Karten einbetten

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

Maps Embed API-URL erstellen

Hier ist ein Beispiel für eine URL, mit der 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 verwenden.
  • PARAMETERS mit den erforderlichen und optionalen Parametern für Ihren 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 lässt sich mit den Attributen height und width des iFrames steuern, z. B.:

<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 folgenden zusätzlichen Attribute verwendet:

  • Das Attribut allowfullscreen, mit dem bestimmte Kartenteile im Vollbildmodus angezeigt werden können.
  • Die Eigenschaften frameborder="0" und style="border:0", um den Standard-iFrame-Rahmen um die Karte zu entfernen.
  • Die referrerpolicy="no-referrer-when-downgrade"-Eigenschaft, damit der Browser die vollständige URL als Referer-Header mit der Anfrage senden kann, sodass die API-Schlüsselbeschränkungen richtig funktionieren.

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

Einschränkungen für API-Schlüssel

Wenn auf der Hosting-Website ein referrer-Meta-Tag mit dem Wert no-referrer oder same-origin festgelegt ist, sendet der Browser den Referer-Header nicht an Google. Dies kann dazu führen, dass Ihre Einschränkung für API-Schlüssel die Anfragen ablehnt. Damit die Einschränkung richtig funktioniert, fügen Sie dem iFrame wie im Beispiel oben die Eigenschaft referrerpolicy hinzu, um das Senden von Referer-Headern an Google explizit zuzulassen.

Kartenmodi auswählen

Sie können einen der folgenden Kartenmodi angeben, die in der Anfrage-URL verwendet werden sollen:

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

place-Modus

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

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 den Standort der Kartenmarkierung. URL-codierter Ortsname, Adresse, Plus Code oder die Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20, wenn Leerzeichen maskiert werden. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes wie „849VCWC8+R9“ in 849VCWC8%2BR9 um.
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Breiten- und Längengradwerte, 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 für den ausgewählten Ort 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änderkacheln unterstützt. Wenn die angeforderte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Sensibilitäten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben wird. Dieses Tag entspricht dem zweistelligen Ländercode der Top-Level-Domain (ccTLD). Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

view-Modus

Im folgenden Beispiel wird 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 Breiten- und Längengradwerte, 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 für den ausgewählten Ort 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änderkacheln unterstützt. Wenn die angeforderte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Sensibilitäten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben wird. Dieses Tag entspricht dem zweistelligen Ländercode der Top-Level-Domain (ccTLD). 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 den Weg zwischen Oslo und Telemark in Norwegen, die Entfernung und die Reisezeit ohne Maut und Autobahnen anzuzeigen.

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, ab dem die Wegbeschreibung angezeigt werden soll. URL-codierter Ortsname, Adresse, Plus Code, Breiten-/Längenkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20, wenn Leerzeichen maskiert werden. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes wie „849VCWC8+R9“ in 849VCWC8%2BR9 um.
destination Erforderlich Definiert den Endpunkt der Wegbeschreibung. URL-codierter Ortsname, Adresse, Plus Code, Breiten-/Längenkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20, wenn Leerzeichen maskiert werden. Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes wie „849VCWC8+R9“ in 849VCWC8%2BR9 um.
waypoints Optional Gibt einen oder mehrere Zwischenorte an, für die eine Route zwischen Start- und Zielort berechnet werden soll. Name des Orts, Adresse oder Orts-ID. Sie können mehrere Wegpunkte angeben, indem Sie Orte durch das Pipe-Zeichen (|) trennen (z.B. Berlin,Germany|Paris,France). Sie können bis zu 20 Wegpunkte angeben.
mode Optional Definiert die Art der Reise. Wenn kein Modus angegeben ist, werden in der Maps Embed API einer oder mehrere der relevantesten Modi für die angegebene Route angezeigt. driving, walking (bevorzugt Fußgängerwege und Gehsteige, sofern verfügbar), bicycling (bevorzugt Routen mit Radwegen und bevorzugten Straßen, sofern verfügbar), transit oder flying.
avoid Optional Gibt an, welche Features in der Wegbeschreibung vermieden werden sollen. Das schließt Routen, die die eingeschränkte(n) Funktion(en) enthalten, nicht aus. Es werden jedoch Routen mit besseren Ergebnissen bevorzugt. 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 Anzeige von Entfernungen in den Ergebnissen verwendet werden soll. Wenn units nicht angegeben ist, werden die Einheiten anhand des origin-Landes der Anfrage bestimmt. metric oder imperial
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Breiten- und Längengradwerte, 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 für den ausgewählten Ort 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änderkacheln unterstützt. Wenn die angeforderte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Sensibilitäten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben wird. Dieses Tag entspricht dem zweistelligen Ländercode der Top-Level-Domain (ccTLD). 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. Außerdem sind von Nutzern beigesteuerte 360°-Fotos und Street View-Sondersammlungen verfügbar.

Jedes Street View-Panorama bietet eine 360°-Ansicht eines einzelnen Orts. Die Bilder bieten eine 360°-Horizontalsicht (komplette Rundumsicht) und eine 180°-Vertikalsicht (von senkrecht oben bis senkrecht unten). Im Modus streetview wird das resultierende Panorama als Kugel mit einer Kamera im Mittelpunkt gerendert. 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 durch Kommas getrennte Werte (46.414382,10.013988). Die API zeigt das Panorama an, das diesem Ort am nächsten ist. Da Street View-Bilder regelmäßig aktualisiert werden und Fotos jedes Mal aus leicht unterschiedlichen Positionen aufgenommen werden können, kann es sein, dass Ihr Standort bei der Aktualisierung der Bilder auf ein anderes Panorama verschoben wird.

  • pano ist eine bestimmte Panorama-ID. Wenn Sie ein pano angeben, können Sie auch ein location angeben. Der Parameter 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 Kompassausrichtung der Kamera in Grad im Uhrzeigersinn von Norden an. Wert in Grad zwischen -180° und 360°
pitch Optional Gibt den Aufwärts- oder Abwärtswinkel der Kamera an. Positive Werte versetzen den Winkel der Kamera nach oben, negative Werte nach unten. Die Standardneigung von 0° wird basierend auf der Position der Kamera beim Aufnehmen des Bildes festgelegt. Daher 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 zwischen -90° und 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. Kleinere Zahlen weisen auf eine höhere Zoomstufe hin. Wert in Grad, mit einem Bereich von 10° bis 100°
center Optional Definiert den Mittelpunkt der Kartenansicht. Akzeptiert kommagetrennte Breiten- und Längengradwerte, 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 für den ausgewählten Ort 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änderkacheln unterstützt. Wenn die angeforderte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Sensibilitäten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben wird. Dieses Tag entspricht dem zweistelligen Ländercode der Top-Level-Domain (ccTLD). Welche Regionen unterstützt werden, sehen Sie in den 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 Ort für die Suche zu definieren, entweder durch Einbeziehung eines Orts in den Suchbegriff (record+stores+in+Seattle) oder durch Einbeziehung eines center- und zoom-Parameters, 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 Breiten- und Längengradwerte, 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 für den ausgewählten Ort 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änderkacheln unterstützt. Wenn die angeforderte Sprache für den Kachelsatz nicht unterstützt wird, wird die Standardsprache für diesen Kachelsatz verwendet.
region Optional Definiert die anzuzeigenden Grenzen und Labels basierend auf geopolitischen Sensibilitäten. Akzeptiert einen Regionscode, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben wird. Dieses Tag entspricht dem zweistelligen Ländercode der Top-Level-Domain (ccTLD). Welche Regionen unterstützt werden, sehen Sie in den Details zur Google Maps Platform-Abdeckung.

Parameter für Orts-IDs

Die Maps Embed API unterstützt die Verwendung von Orts-IDs anstelle 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. Im folgenden Code wird das Rathaus von New York City als Ausgangspunkt 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.

  • Bei source werden Street View-Suchanfragen auf ausgewählte Quellen beschränkt. 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. Innenaufnahmen werden nicht in Suchergebnissen angezeigt. 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 sich feststellen lässt, ob sie im Innen- oder Außenbereich aufgenommen wurden. PhotoSpheres werden beispielsweise nicht zurückgegeben, da nicht bekannt ist, ob sie im Innen- oder Außenbereich aufgenommen wurden.