Eine Karte einbetten

In dieser Anleitung wird beschrieben, wie Sie eine interaktive Karte in Ihre Webseite einbetten.

Maps Embed API-URL erstellen

Die folgende Beispiel-URL lädt die Maps Embed API:

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 mit den erforderlichen und optionalen Parametern 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. Sie können die Größe der Karte mit den Attributen height und width des Iframes steuern, z. B. so:

<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 Properties verwendet:

  • Mit der allowfullscreen-Eigenschaft können bestimmte Kartenteile im Vollbildmodus angezeigt werden.
  • Die Eigenschaften frameborder="0" und style="border:0", um den standardmäßigen IFrame-Rahmen um die Karte herum zu entfernen.
  • Die referrerpolicy="no-referrer-when-downgrade"-Eigenschaft, damit der Browser die vollständige URL als Referer-Header mit der Anfrage senden kann, damit die API-Schlüsseleinschränkungen richtig 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 in der Regel einfacher ist, mit größeren Karten zu interagieren. Eingebettete Karten werden in beiden Dimensionen nicht unter 200 Pixeln unterstützt.

Einschränkungen für API-Schlüssel

Wenn die Hosting-Website ein referrer-Meta-Tag mit der Einstellung no-referrer oder same-origin hat, sendet der Browser den Referer-Header nicht an Google. Dies kann dazu führen, dass die Anfragen aufgrund der Einschränkung des API-Schlüssels abgelehnt werden. Damit die Einschränkung ordnungsgemäß funktioniert, fügen Sie dem Iframe wie im Beispiel oben die Eigenschaft referrerpolicy hinzu, um ausdrücklich zuzulassen, dass Referer-Header an Google gesendet werden.

Werbung auf der Karte

Die Maps Embed API kann Anzeigen auf der Karte enthalten. Das Anzeigenformat und die Anzeigen, die auf einer bestimmten Karte ausgeliefert werden, können sich ohne vorherige Ankündigung ändern.

Kartenmodi auswählen

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

  • place: Eine Markierung an einem bestimmten Ort oder einer bestimmten Adresse, z. B. an einer Sehenswürdigkeit, einem Unternehmen, einem geografischen Element oder einer Stadt.
  • view: Hiermit wird eine Karte ohne Markierungen oder Wegbeschreibungen zurückgegeben.
  • directions: Zeigt den Weg zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und die Reisezeit an.
  • streetview: Zeigt interaktive Panoramaansichten von ausgewählten Orten an.
  • search: Hier sehen Sie die Ergebnisse einer Suche in der sichtbaren Kartenregion.

place-Modus

In der folgenden URL wird der Kartenmodus place verwendet, um eine Markierung 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 Hier wird der Standort der Markierung auf der Karte definiert. Ortsname, Adresse, Pluscode oder Orts-ID mit URL-Escaping Die Maps Embed API unterstützt sowohl + als auch %20 für das Entkommenttieren von Leerzeichen. Beispiel: „Rathaus, New York, NY“ in City+Hall,New+York,NY oder Pluscodes „849VCWC8+R9“ in 849VCWC8%2BR9 umwandeln.
center Optional Hiermit wird der Mittelpunkt der Kartenansicht definiert. Es werden kommagetrennte Breiten- und Längengradwerte akzeptiert, z. B.: 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). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert die Art der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Hier wird die Sprache definiert, 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 Hier werden die entsprechenden Grenzen und Labels definiert, die basierend auf geopolitischen Gegebenheiten angezeigt werden sollen. Es wird ein Regionscode akzeptiert, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und dem zweistelligen Ländercode 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 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 Hiermit wird der Mittelpunkt der Kartenansicht definiert. Es werden kommagetrennte Breiten- und Längengradwerte akzeptiert, z. B.: 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). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert die Art der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Hier wird die Sprache definiert, 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 Hier werden die entsprechenden Grenzen und Labels definiert, die basierend auf geopolitischen Gegebenheiten angezeigt werden sollen. Es wird ein Regionscode akzeptiert, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und dem zweistelligen Ländercode 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 im Modus directions der Weg zwischen Oslo und Telemark, Norwegen, die Entfernung und die Fahrtzeit angezeigt, wobei 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

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-entkommentierter Ortsname, Adresse, Pluscode, Breiten-/Längengradkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20 für das Entkommenttieren von Leerzeichen. Beispiel: „Rathaus, New York, NY“ in City+Hall,New+York,NY oder Pluscodes „849VCWC8+R9“ in 849VCWC8%2BR9 umwandeln.
destination Erforderlich Definiert den Endpunkt der Wegbeschreibung. URL-entkommentierter Ortsname, Adresse, Pluscode, Breiten-/Längengradkoordinaten oder Orts-ID. Die Maps Embed API unterstützt sowohl + als auch %20 für das Entkommenttieren von Leerzeichen. Beispiel: „Rathaus, New York, NY“ in City+Hall,New+York,NY oder Pluscodes „849VCWC8+R9“ in 849VCWC8%2BR9 umwandeln.
waypoints Optional Gibt einen oder mehrere Zwischenorte an, um eine Wegbeschreibung zwischen Start- und Zielort zu erstellen. Ortsname, 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 Fortbewegung. Wenn kein Modus angegeben wird, zeigt die Maps Embed API einen oder mehrere der relevantesten Modi für die angegebene Route an. driving, walking (wobei Fußwege und Bürgersteige bevorzugt werden, sofern verfügbar), bicycling (wobei Radwege und bevorzugte Straßen bevorzugt werden, sofern verfügbar), transit oder flying.
avoid Optional Gibt an, welche Elemente in den Wegbeschreibungen vermieden werden sollen. Beachten Sie, dass dadurch nicht ausgeschlossen wird, dass Routen mit den eingeschränkten Elementen enthalten sind. Das Ergebnis wird jedoch in Richtung günstigerer Routen verzerrt. tolls, ferries und/oder highways. Trennen Sie mehrere Werte durch einen senkrechten Strich (z.B. avoid=tolls|highways).
units Optional Gibt die Maßeinheit an, in der Entfernungen in den Ergebnissen angezeigt werden sollen (metrisch oder imperial). Wenn keine units angegeben sind, werden die Einheiten anhand des origin-Landes der Abfrage bestimmt. metric oder imperial
center Optional Hiermit wird der Mittelpunkt der Kartenansicht definiert. Es werden kommagetrennte Breiten- und Längengradwerte akzeptiert, z. B.: 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). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert die Art der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Hier wird die Sprache definiert, 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 Hier werden die entsprechenden Grenzen und Labels definiert, die basierend auf geopolitischen Gegebenheiten angezeigt werden sollen. Es wird ein Regionscode akzeptiert, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und dem zweistelligen Ländercode 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 ausgewählten Orten im Abdeckungsbereich anzeigen. Außerdem sind von Nutzern erstellte Fotosphären und Spezialsammlungen von Street View verfügbar.

Jedes Street View-Panorama bietet eine vollständige 360-Grad-Ansicht eines einzelnen Orts. Die Bilder enthalten eine 360-Grad-Horizontalsicht (vollständige Rundumsicht) und eine 180-Grad-Vertikalsicht (von senkrecht oben bis senkrecht unten). Der Modus streetview bietet einen Viewer, 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 eine Breite und einen Längengrad als kommagetrennte 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 die Fotos jedes Mal aus leicht unterschiedlichen Positionen aufgenommen werden können, kann es sein, dass Ihr Standort bei der Aktualisierung der Bilder zu einem anderen Panorama wechselt.

  • pano ist eine bestimmte Panorama-ID. Wenn Sie pano angeben, können Sie auch location angeben. 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 aus an. Wert in Grad von -180° bis 360°
pitch Optional Gibt den Auf- oder Abwärtswinkel der Kamera an. Positive Werte versetzen den Winkel der Kamera nach oben, negative Werte nach unten. Der Standard-Neigungswinkel von 0° wird anhand der Position der Kamera bei der Aufnahme des Bildes festgelegt. Daher ist eine Neigung von 0° oft, aber nicht immer, horizontal. Ein Bild, das auf einem Berg aufgenommen wurde, wird vermutlich einen Standardneigungswinkel haben, der nicht horizontal ist. Wert in Grad von -90° bis 90°
fov Optional bestimmt das horizontale Sichtfeld des Bildes. Standardmäßig ist der Wert 90°. Bei einem Darstellungsbereich mit fester Größe kann das Sichtfeld als Zoomstufe betrachtet werden. Kleinere Zahlen stehen dabei für eine höhere Zoomstufe. Wert in Grad, Bereich 10° bis 100°
center Optional Hiermit wird der Mittelpunkt der Kartenansicht definiert. Es werden kommagetrennte Breiten- und Längengradwerte akzeptiert, z. B.: 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). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert die Art der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Hier wird die Sprache definiert, 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 Hier werden die entsprechenden Grenzen und Labels definiert, die basierend auf geopolitischen Gegebenheiten angezeigt werden sollen. Es wird ein Regionscode akzeptiert, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und dem zweistelligen Ländercode 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 in der sichtbaren Kartenregion angezeigt. Es wird empfohlen, einen Ort für die Suche zu definieren. Geben Sie dazu entweder einen Ort in den Suchbegriff (record+stores+in+Seattle) oder die Parameter center und zoom an, 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 wie in+Seattle oder near+98033 enthalten.
center Optional Hiermit wird der Mittelpunkt der Kartenansicht definiert. Es werden kommagetrennte Breiten- und Längengradwerte akzeptiert, z. B.: 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). Die Obergrenze kann je nach den am ausgewählten Standort verfügbaren Kartendaten variieren.
maptype Optional Definiert die Art der zu ladenden Kartenkacheln. roadmap (Standard) oder satellite
language Optional Hier wird die Sprache definiert, 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 Hier werden die entsprechenden Grenzen und Labels definiert, die basierend auf geopolitischen Gegebenheiten angezeigt werden sollen. Es wird ein Regionscode akzeptiert, der als zweistelliges (nicht numerisches) untergeordnetes Unicode-Tag für Regionen angegeben ist und dem zweistelligen Ländercode der Top-Level-Domain (ccTLD) zugeordnet ist. Welche Regionen unterstützt werden, sehen Sie in den 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 Google Places API-Dokumentation.

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

  • q
  • origin
  • destination
  • waypoints

Damit Sie eine Orts-ID verwenden können, müssen Sie zuerst das Präfix place_id: hinzufügen. Im folgenden Code wird das New York City Hall als Startpunkt für eine Wegbeschreibung 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 schränkt Street View-Suchanfragen auf ausgewählte Quellen ein. 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. Beachten Sie außerdem, dass bei der Suche nur Panoramen zurückgegeben werden, bei denen sich feststellen lässt, ob sie drinnen oder draußen aufgenommen wurden. So werden beispielsweise keine Fotosphären zurückgegeben, da nicht bekannt ist, ob sie drinnen oder draußen aufgenommen wurden.