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 erstellte URL als Wert des src
-Attributs eines iFrames fest. Mit den Attributen height
und width
des iFrames können Sie 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 Eigenschaften verwendet:
- Die Eigenschaft
allowfullscreen
, mit der bestimmte Kartenteile im Vollbildmodus angezeigt werden können. - Mit den Eigenschaften
frameborder="0"
undstyle="border:0"
lässt sich der Standard-iFrame-Rahmen aus der Karte entfernen. - Das Attribut
referrerpolicy="no-referrer-when-downgrade"
, mit dem der Browser die vollständige URL alsReferer
-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 Website anpassen. Für Besucher ist es jedoch in der Regel einfacher, mit größeren Karten zu interagieren. Eingebettete Karten, die kleiner als 200 Pixel sind, werden in keiner der Dimensionen 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. Das kann dazu führen, dass die API-Schlüsseleinschränkung die Anfragen zurückweist. Damit die Einschränkung richtig funktioniert, müssen Sie dem iFrame wie im obigen Beispiel das Attribut referrerpolicy
hinzufügen, damit explizit Referer
-Header an Google gesendet werden können.
Werbung auf der Karte
Die Maps Embed API kann Werbung auf der Karte enthalten. Das Anzeigenformat und die auf einer Karte eingeblendeten Anzeigen können ohne Vorankündigung geändert werden.
Kartenmodi auswählen
Sie können in Ihrer Anfrage-URL einen der folgenden Kartenmodi angeben:
place
: Hiermit wird eine Markierung auf der Karte 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
: 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
: Die Suchergebnisse werden im sichtbaren Kartenbereich angezeigt.
place
-Modus
In der folgenden URL wird der place
-Kartenmodus 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 | Definiert die Position der Kartenmarkierung. | Ortsname, Adresse, Plus Code oder Orts-ID mit URL-Escaping
Die Maps Embed API unterstützt bei der Maskierung von Gruppenbereichen sowohl + als auch %20 . Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder die Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 um. |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Zulässig sind 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 von 0 (weltweit) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren 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, die für UI-Elemente und die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher die 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 Gegebenheiten die entsprechenden Grenzen und Beschriftungen, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Regions-Subtag-Zuordnung zu bekannten zweistelligen ccTLD-Werten ("Top-Level-Domain") angegeben ist. 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 den Mittelpunkt der Kartenansicht. | Zulässig sind 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 von 0 (weltweit) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren 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, die für UI-Elemente und die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher die 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 Gegebenheiten die entsprechenden Grenzen und Beschriftungen, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Regions-Subtag-Zuordnung zu bekannten zweistelligen ccTLD-Werten ("Top-Level-Domain") angegeben ist. 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, Norwegen, sowie die Entfernung und die Reisezeit unter Vermeidung von Mautgebühren und Autobahnen darzustellen.
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, von dem aus die Route angezeigt werden soll. | Ortsname, Adresse, Plus Code, Breiten- und Längengrade oder Orts-ID mit Escape-Zeichen
Die Maps Embed API unterstützt bei der Maskierung von Gruppenbereichen sowohl + als auch %20 . Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder die Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 um. |
destination |
Erforderlich | Definiert den Endpunkt der Route. | Ortsname, Adresse, Plus Code, Breiten- und Längengrade oder Orts-ID mit Escape-Zeichen
Die Maps Embed API unterstützt bei der Maskierung von Gruppenbereichen sowohl + als auch %20 . Wandeln Sie beispielsweise „City Hall, New York, NY“ in City+Hall,New+York,NY oder die Plus Codes „849VCWC8+R9“ in 849VCWC8%2BR9 um. |
waypoints |
Optional | Gibt einen oder mehrere Zwischenstellen für die Routenplanung zwischen Start- und Zielort an. | Ortsname, Adresse oder Orts-ID.
Sie können mehrere Wegpunkte angeben, indem Sie Orte mit einem 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 (Fußgängerwege und Bürgersteige werden bevorzugt, falls verfügbar), bicycling (die Routen mit Radwegen und bevorzugten Straßen, falls verfügbar), transit oder flying . |
avoid |
Optional | Gibt Elemente an, die in Richtungen vermieden werden sollen. Routen, die die eingeschränkten Features enthalten, sind dadurch nicht ausgeschlossen. Das Ergebnis wird dabei nach günstigeren Routen gewichtet. | tolls , ferries und/oder highways .
Trennen Sie mehrere Werte durch einen senkrechten Strich (z.B. avoid=tolls|highways ). |
units |
Optional | Gibt eine Messmethode (metrisch oder imperial) an, wenn Entfernungen in den Ergebnissen angezeigt werden. 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. | Zulässig sind 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 von 0 (weltweit) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren 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, die für UI-Elemente und die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher die 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 Gegebenheiten die entsprechenden Grenzen und Beschriftungen, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Regions-Subtag-Zuordnung zu bekannten zweistelligen ccTLD-Werten ("Top-Level-Domain") angegeben ist. 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 im Abdeckungsbereich darstellen lassen. Außerdem sind von Nutzern bereitgestellte 360°-Fotos und ausgewählte Street View-Sammlungen verfügbar.
Jedes Street View-Panorama bietet eine vollständige 360-Grad-Ansicht eines einzelnen Standorts. Bilder bieten eine horizontale 360-Grad-Ansicht (eine vollständige Rundumansicht) und eine 180-Grad-Vertikalsicht (von senkrecht nach oben nach unten). Der streetview
-Modus bietet einen Viewer, mit dem das resultierende Panorama als Kugel mit einer Kamera in ihrem Mittelpunkt gerendert wird. Sie können die Kamera bearbeiten, um den Zoom und die Ausrichtung zu steuern.
Sehen Sie sich das folgende Panorama des 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 einen Breiten- und einen Längengrad als kommagetrennte Werte (46.414382,10.013988
). In der API wird das Panorama angezeigt, das diesem Standort am nächsten ist. Die Street View-Bilder werden regelmäßig aktualisiert und Fotos können jedes Mal an leicht unterschiedlichen Positionen aufgenommen werden. Daher ist es möglich, dass Ihr Standort bei der Aktualisierung der Bilder ein anderes Panorama verwendet.pano
ist eine spezifische Panorama-ID. Wenn Sie einenpano
angeben, können Sie auch einenlocation
angeben. Dielocation
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 ausgehend von Norden an. | Wert in Grad zwischen -180° und 360° |
pitch |
Optional | gibt den Winkel der Kamera nach oben oder unten an. Positive Werte führen dazu, dass die Kamera nach oben gerichtet wird, negative Werte den Winkel der Kamera nach unten. Die Standardneigung von 0° wird anhand der Kameraposition bei der Aufnahme festgelegt. Aus diesem Grund ist ein Neigungswinkel von 0 ° oft, aber nicht immer, horizontal. So wird beispielsweise ein Bild, das auf einem Hügel aufgenommen wurde, wahrscheinlich einen Standardneigungswinkel haben, der nicht horizontal ist. | Wert in Grad zwischen -90 und 90 ° |
fov |
Optional | bestimmt das horizontale Sichtfeld des Bildes. Die Standardeinstellung 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 mit einem Bereich von 10° bis 100° |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Zulässig sind 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 von 0 (weltweit) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren 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, die für UI-Elemente und die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher die 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 Gegebenheiten die entsprechenden Grenzen und Beschriftungen, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Regions-Subtag-Zuordnung zu bekannten zweistelligen ccTLD-Werten ("Top-Level-Domain") angegeben ist. Informationen zu unterstützten Regionen finden Sie in den Details zur Google Maps Platform-Abdeckung. |
search
-Modus
Im Search
-Modus werden die Ergebnisse für die Suche im sichtbaren Kartenbereich angezeigt.
Es wird empfohlen, einen Standort für die Suche zu definieren. Fügen Sie hierzu entweder einen Standort in den Suchbegriff ein (record+stores+in+Seattle
) oder fügen Sie die Parameter center
und zoom
ein, 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 wie in+Seattle oder near+98033 enthalten. |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Zulässig sind 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 von 0 (weltweit) bis 21 (einzelne Gebäude). Die Obergrenze kann je nach den verfügbaren 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, die für UI-Elemente und die Anzeige von Labels auf Kartenkacheln verwendet werden soll. Standardmäßig sehen Besucher die 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 Gegebenheiten die entsprechenden Grenzen und Beschriftungen, die angezeigt werden sollen. | Akzeptiert einen Regionscode, der als zweistellige (nicht numerische) Unicode-Regions-Subtag-Zuordnung zu bekannten zweistelligen ccTLD-Werten ("Top-Level-Domain") angegeben ist. 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 eines Ortsnamens oder einer Adresse. Orts-IDs sind eine stabile Möglichkeit, um 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 Startpunkt für eine Routenanfrage angegeben: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
Mit
radius
wird ein in Metern angegebener Radius 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 die Suchergebnisse einbezogen. Unter Umständen sind für den angegebenen Ort keine Außenansichten vorhanden. Außerdem werden bei der Suche nur Panoramen zurückgegeben, bei denen festgestellt werden kann, ob sie sich im Innen- oder Außenbereich befinden. Beispielsweise werden PhotoSphere-Aufnahmen nicht zurückgegeben, da nicht bekannt ist, ob sie sich im Innen- oder Außenbereich befinden.
- Bei