In diesem Leitfaden erfahren Sie, wie Sie eine interaktive Karte in Ihre Webseite einbetten.
Maps Embed API-URL erstellen
Mit der folgenden Beispiel-URL wird die Maps Embed API geladen:
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 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 für das Attribut src
eines iFrames fest. Sie können die Größe der Karte mit den Attributen height
und width
des iFrames festlegen. 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 Eigenschaften verwendet:
- Die Eigenschaft
allowfullscreen
, damit bestimmte Kartenteile im Vollbildmodus angezeigt werden können. - Mit den Eigenschaften
frameborder="0"
undstyle="border:0"
kann der Standard-iFrame-Rahmen um die Karte entfernt werden. - Das Attribut
referrerpolicy="no-referrer-when-downgrade"
, damit der Browser die vollständige URL alsReferer
-Header mit der Anfrage senden kann, damit die Einschränkungen für den API-Schlüssel ordnungsgemäß funktionieren.
Sie können die Größe des iFrames an die Struktur und das Design Ihrer Website anpassen. Wir haben jedoch festgestellt, dass es für Besucher normalerweise einfacher ist, mit größeren Karten zu interagieren. Hinweis: Eingebettete Karten mit einer Größe von maximal 200 Pixeln in keiner Dimension werden unterstützt.
Einschränkungen für API-Schlüssel
Wenn auf der Hostwebsite ein referrer
-Meta-Tag auf no-referrer
oder same-origin
gesetzt ist, sendet der Browser den Referer
-Header nicht an Google. Dies kann dazu führen, dass die Einschränkung für API-Schlüssel die Anfragen ablehnt. Damit die Einschränkung richtig funktioniert, musst du dem iFrame wie im obigen Beispiel die Eigenschaft referrerpolicy
hinzufügen, um das Senden von Referer
-Headern an Google explizit zuzulassen.
Werbung auf der Karte
Die Maps Embed API kann Werbung auf der Karte enthalten. Das Anzeigenformat und die Gruppe der Anzeigen, die auf einer Karte dargestellt werden, können ohne vorherige Ankündigung geändert werden.
Kartenmodi auswählen
Sie können in Ihrer Anfrage-URL einen der folgenden Kartenmodi angeben:
place
: Hiermit wird eine Kartenmarkierung für einen bestimmten Ort oder eine bestimmte Adresse angezeigt, z. B. eine Sehenswürdigkeit, ein Unternehmen, ein geografisches Element oder eine Stadt.view
: gibt eine Karte ohne Markierungen oder Wegbeschreibungen zurückdirections
: Hier werden die Strecke zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und Reisezeit angezeigt.streetview
: zeigt interaktive Panoramaansichten von bestimmten Orten an.search
: zeigt Ergebnisse für eine Suche im sichtbaren Kartenbereich an.
place
-Modus
Bei 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
Sie können folgende Parameter verwenden:
Parameter | Typ | Beschreibung | Gültige Werte |
---|---|---|---|
q |
Erforderlich | Legt die Position der Kartenmarkierung fest. | Ortsname, Adresse, Plus Code oder Orts-ID mit URL-Escaping
Die Maps Embed API unterstützt sowohl + als auch %20 , wenn Leerzeichen maskiert werden sollen. Konvertieren Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 . |
center |
Optional | Definiert die Mitte der Kartenansicht. | Akzeptiert durch Kommas getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840 . |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte zwischen 0 (die ganze Welt) und 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 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 basierend auf geopolitischen Aspekten die entsprechenden Grenzen und Labels, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Region-Sub-Tag-Zuordnung zu bekannten, zweistelligen ccTLD-Werten („Top-Level-Domain“) angegeben wird. Informationen zu unterstützten Regionen finden 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
¢er=-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 Kommas getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840 . |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte zwischen 0 (die ganze Welt) und 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 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 basierend auf geopolitischen Aspekten die entsprechenden Grenzen und Labels, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Region-Sub-Tag-Zuordnung zu bekannten, zweistelligen ccTLD-Werten („Top-Level-Domain“) angegeben wird. Informationen zu unterstützten Regionen finden Sie in den Details zur Google Maps Platform-Abdeckung. |
directions
-Modus
Im folgenden Beispiel wird der Modus directions
verwendet, um die Strecke zwischen Oslow und Telemark in Norwegen sowie die Entfernung und die Fahrzeit ohne Mautstraßen und Autobahnen anzuzeigen.
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 | Legt den Startpunkt fest, von dem aus die Route angezeigt werden soll. | Ortsname, Adresse, Plus Code, Breiten-/Längengradkoordinaten oder Orts-ID mit URL-Escaping.
Die Maps Embed API unterstützt sowohl + als auch %20 , wenn Leerzeichen maskiert werden sollen. Konvertieren Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 . |
destination |
Erforderlich | Definiert den Endpunkt der Route. | Ortsname, Adresse, Plus Code, Breiten-/Längengradkoordinaten oder Orts-ID mit URL-Escaping.
Die Maps Embed API unterstützt sowohl + als auch %20 , wenn Leerzeichen maskiert werden sollen. Konvertieren Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 . |
waypoints |
Optional | Gibt einen oder mehrere Zwischenorte für die Routenplanung zwischen Start- und Zielort an. | Name, Adresse oder Orts-ID
Sie können mehrere Wegpunkte angeben, indem Sie die Stellen 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 angegeben ist, zeigt die Maps Embed API einen oder mehrere der relevantesten Modi für die angegebene Route an. | driving , walking (für Fußgängerwege und Bürgersteige, falls verfügbar), bicycling (über Radwege und bevorzugte Straßen, sofern verfügbar), transit oder flying . |
avoid |
Optional | Gibt Elemente an, die in Wegbeschreibungen vermieden werden sollen. Routen, die die eingeschränkten Features enthalten, werden dadurch nicht ausgeschlossen. Das Ergebnis wird dadurch 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 (metrisches oder angloamerikanisches Maß) für die Anzeige von Entfernungen in den Ergebnissen an. Wenn units nicht angegeben ist, bestimmt das origin -Land der Abfrage die zu verwendenden Einheiten. |
metric oder imperial |
center |
Optional | Definiert die Mitte der Kartenansicht. | Akzeptiert durch Kommas getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840 . |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte zwischen 0 (die ganze Welt) und 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 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 basierend auf geopolitischen Aspekten die entsprechenden Grenzen und Labels, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Region-Sub-Tag-Zuordnung zu bekannten, zweistelligen ccTLD-Werten („Top-Level-Domain“) angegeben wird. Informationen zu unterstützten Regionen finden 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 über die gesamte Abdeckungsbereich hinweg anzeigen lassen. Von Nutzern bereitgestellte 360°-Fotos und ausgewählte Street View-Sammlungen sind ebenfalls verfügbar.
Jedes Street View-Panorama bietet eine vollständige 360-Grad-Ansicht eines einzelnen Orts. Die Bilder bieten eine 360-Grad-Horizontalsicht (vollständige Rundumsicht) und eine 180-Grad-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 Ausrichtung der Kamera zu steuern.
Hier 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 Breiten- und Längengrade als kommagetrennte Werte (46.414382,10.013988
). Die API zeigt das Panorama an, das diesem Standort am nächsten ist. Da die Street View-Bilder regelmäßig aktualisiert werden und Fotos jedes Mal an leicht unterschiedlichen Positionen aufgenommen werden können, ist es möglich, dass Ihr Standort bei der Aktualisierung von Bildern zu einem anderen Panorama wechselt.pano
ist eine spezifische Panorama-ID. Wenn Siepano
angeben, können Sie auch einelocation
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 Winkel (nach oben oder unten) der Kamera an. Positive Werte bewirken, dass die Kamera nach oben gerichtet wird, negative Werte den Winkel nach unten. Der Standardneigungswinkel von 0° wird anhand der Kameraposition zum Zeitpunkt der Aufnahme festgelegt. Aus diesem Grund ist ein Neigungswinkel von 0° häufig, aber nicht immer, horizontal. Ein Bild, das auf einem Hügel aufgenommen wurde, wird wahrscheinlich einen Standardneigungswinkel haben, der nicht horizontal ist. | Wert in Grad von -90° bis 90° |
fov |
Optional | bestimmt das horizontale Sichtfeld des Bildes. Die Standardeinstellung ist 90°. Bei einem Darstellungsbereich mit fester Größe entspricht das Sichtfeld der Zoomstufe, wobei kleinere Zahlen eine höhere Zoomstufe angeben. | Wert in Grad bei einem Bereich von 10°–100° |
center |
Optional | Definiert die Mitte der Kartenansicht. | Akzeptiert durch Kommas getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840 . |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte zwischen 0 (die ganze Welt) und 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 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 basierend auf geopolitischen Aspekten die entsprechenden Grenzen und Labels, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Region-Sub-Tag-Zuordnung zu bekannten, zweistelligen ccTLD-Werten („Top-Level-Domain“) angegeben wird. Informationen zu unterstützten Regionen finden 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 Standort für die Suche festzulegen. Dazu können Sie entweder einen Ort in den Suchbegriff aufnehmen (record+stores+in+Seattle
) oder die Parameter center
und zoom
einschließen, um die Suche zu begrenzen.
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. | Er kann eine geografische Einschränkung umfassen, z. B. in+Seattle oder near+98033 . |
center |
Optional | Definiert die Mitte der Kartenansicht. | Akzeptiert durch Kommas getrennte Werte für Breiten- und Längengrad. Beispiel: 37.4218,-122.0840 . |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte zwischen 0 (die ganze Welt) und 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 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 basierend auf geopolitischen Aspekten die entsprechenden Grenzen und Labels, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Region-Sub-Tag-Zuordnung zu bekannten, zweistelligen ccTLD-Werten („Top-Level-Domain“) angegeben wird. Informationen zu unterstützten Regionen finden Sie in den Details zur Google Maps Platform-Abdeckung. |
Orts-ID-Parameter
Die Maps Embed API unterstützt die Verwendung von Orts-IDs anstelle von Ortsnamen oder Adressen. Orts-IDs sind eine stabile Möglichkeit, einen Ort eindeutig zu identifizieren. Weitere Informationen finden Sie in der Dokumentation zur Google Places API.
In der Maps Embed API werden Orts-IDs für die folgenden URL-Parameter akzeptiert:
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 Startpunkt einer Routenanfrage festgelegt: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
Mit
radius
wird ein Radius 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 werden nicht in den Suchergebnissen angezeigt. Es kann vorkommen, dass für den angegebenen Ort keine Außenansichten vorhanden sind. Außerdem werden bei der Suche nur Panoramen zurückgegeben, wenn festgestellt werden kann, ob sie sich im Innenbereich oder im Freien befinden. Photo Sphere-Aufnahmen werden beispielsweise nicht zurückgegeben, weil nicht bekannt ist, ob sie sich im Innen- oder Außenbereich befinden.
- Bei