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 Ihre Karte .
URL in einen iFrame einfügen
Um die Maps Embed API auf Ihrer Webseite zu verwenden, legen Sie die URL fest,
erstellt als Wert des src
-Attributs eines iFrames. Sie können die Größe der Karte mit
Die Attribute height
und width
des iFrames. 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. - Die Attribute
frameborder="0"
undstyle="border:0"
, um den Standard zu entfernen iFrame-Rahmen des Rahmens der Karte zu sehen. - Das Attribut
referrerpolicy="no-referrer-when-downgrade"
, das den Browser die vollständige URL alsReferer
-Header mit der Anfrage zu senden, sodass das Einschränkungen für API-Schlüssel funktionieren möglicherweise korrekt.
Sie können die Größe des iFrame an die Struktur und das Design Ihrer Website anpassen. Wir haben jedoch festgestellt, dass es für Besucher in der Regel einfacher ist, mit größeren Karten zu interagieren. Eingebettete Karten, die maximal 200 Pixel groß sind, werden in folgenden Bereichen nicht unterstützt: Dimension.
Einschränkungen für API-Schlüssel
Wenn auf der Hostwebsite das Meta-Tag referrer
auf no-referrer
gesetzt ist oder
same-origin
eingeben, sendet der Browser den Header „Referer
“ nicht an Google. Dieses
kann zu einer Einschränkung des API-Schlüssels führen
um die Anträge abzulehnen. Damit die Einschränkung richtig funktioniert, fügen Sie eine
referrerpolicy
an den iFrame wie im obigen Beispiel, um explizit
Zulassen, dass Referer
-Header an Google gesendet werden.
Werbung auf der Karte
Die Maps Embed API kann Werbung auf der Karte enthalten. Das Anzeigenformat und Die auf einer Karte gezeigten Anzeigen können ohne Ankündigung geändert werden.
Kartenmodi auswählen
Sie können in Ihrer Anfrage-URL einen der folgenden Kartenmodi angeben:
place
: Markierung auf der Karte für einen bestimmten Ort oder eine bestimmte Adresse einblenden etwa eine Sehenswürdigkeit, ein Unternehmen, ein geografisches Element oder eine Stadt.view
: gibt eine Karte ohne Markierungen oder Wegbeschreibungen zurückdirections
: Der Pfad zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und die Reisezeit.streetview
: zeigt interaktive Panoramaansichten von gekennzeichneten Orten.search
: Die Suchergebnisse werden auf der sichtbaren Karte angezeigt. Region
place
-Modus
In der folgenden URL wird mit dem place
-Kartenmodus eine Kartenmarkierung am
Eiffelturm:
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. | Ortsname, Adresse, Plus Code oder Orts-ID mit URL-Escaping
Die Maps Embed API unterstützt sowohl + als auch %20
aus Leerzeichen
mit Escapezeichen zu versehen. Konvertieren Sie beispielsweise „City Hall, New York, NY“. bis
City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ bis
849VCWC8%2BR9 . |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Durch Kommas getrennte Werte für Breiten- und Längengrad sind zulässig. Beispiel:
37.4218,-122.0840 |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte von 0 (weltweit) bis 21
(einzelne Gebäude). Der obere Grenzwert kann je nach Kartendaten variieren.
an dem ausgewählten Ort verfügbar sind. |
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 an. Standardmäßig sehen Besucher eine eigene Karte. Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. wenn das gewünschte Sprache für den Kachelsatz nicht unterstützt wird, ist der Standardsprache für diesen Kachelsatz verwendet wird. | |
region |
Optional | Definiert die entsprechenden Rahmen und Beschriftungen, die angezeigt werden sollen, basierend auf geopolitische Sensibilitäten. | Akzeptiert einen Regionscode aus zwei Zeichen (nicht numerisch) Zuordnung des Unicode-Regions-Subtags zur bekannten ccTLD („Top-Level-Domain“) aus zwei Zeichen bestehen. Weitere Informationen finden Sie unter Google Maps Platform Abdeckungsdetails für unterstützte Regionen. |
view
-Modus
Im folgenden Beispiel werden der Modus view
und der optionale Parameter maptype
verwendet, um
Satellitenansicht der Karte anzeigen:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-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. | Durch Kommas getrennte Werte für Breiten- und Längengrad sind zulässig. Beispiel:
37.4218,-122.0840 |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte von 0 (weltweit) bis 21
(einzelne Gebäude). Der obere Grenzwert kann je nach Kartendaten variieren.
an dem ausgewählten Ort verfügbar sind. |
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 an. Standardmäßig sehen Besucher eine eigene Karte. Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. wenn das gewünschte Sprache für den Kachelsatz nicht unterstützt wird, ist der Standardsprache für diesen Kachelsatz verwendet wird. | |
region |
Optional | Definiert die entsprechenden Rahmen und Beschriftungen, die angezeigt werden sollen, basierend auf geopolitische Sensibilitäten. | Akzeptiert einen Regionscode aus zwei Zeichen (nicht numerisch) Zuordnung des Unicode-Regions-Subtags zur bekannten ccTLD („Top-Level-Domain“) aus zwei Zeichen bestehen. Weitere Informationen finden Sie unter Google Maps Platform Abdeckungsdetails für unterstützte Regionen. |
directions
-Modus
Im folgenden Beispiel wird der directions
-Modus verwendet, um den Pfad zwischen Oslow anzuzeigen
und Telemark, Norwegen, die Entfernung und Reisezeit unter Vermeidung von Mautstraßen und Autobahnen.
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 Route angezeigt werden soll. | Ortsname, Adresse, Plus Code, Breiten- und Längengrad mit URL-Escaping
Koordinaten oder Orts-ID angeben.
Die Maps Embed API unterstützt sowohl + als auch %20
aus Leerzeichen
mit Escapezeichen zu versehen. Konvertieren Sie beispielsweise „City Hall, New York, NY“. bis
City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ bis
849VCWC8%2BR9 . |
destination |
Erforderlich | Definiert den Endpunkt der Route. | Ortsname, Adresse, Plus Code, Breiten- und Längengrad mit URL-Escaping
Koordinaten oder Orts-ID angeben.
Die Maps Embed API unterstützt sowohl + als auch %20
aus Leerzeichen
mit Escapezeichen zu versehen. Konvertieren Sie beispielsweise „City Hall, New York, NY“. bis
City+Hall,New+York,NY oder Plus Codes „849VCWC8+R9“ bis
849VCWC8%2BR9 . |
waypoints |
Optional | Gibt einen oder mehrere Zwischenstellen an, zwischen denen die Route berechnet werden soll Start- und Zielort. | Ortsname, Adresse oder Orts-ID.
Mithilfe des senkrechten Strichs (|) können Sie mehrere Wegpunkte angeben,
separaten Orten (z.B. Berlin,Germany|Paris,France ). Sie können
bis zu 20 Wegpunkte angeben. |
mode |
Optional | Definiert die Mobilitätsform. Ist kein Modus angegeben, Maps Embed API zeigt einen oder mehrere der relevantesten Modi für den angegebene Route. | driving , walking (Fußgänger bevorzugt)
Wege und Bürgersteige, falls verfügbar), bicycling (die
Routen mit Radwegen und bevorzugten Straßen (sofern verfügbar)
transit oder flying . |
avoid |
Optional | Gibt Elemente an, die in Richtungen vermieden werden sollen. Beachten Sie, dass dies nicht Routen mit den eingeschränkten Funktionen ausschließen. sie beeinflusst, zu günstigeren Routen führt. | tolls , ferries und/oder highways .
Trennen Sie mehrere Werte durch einen senkrechten Strich (z.B.
avoid=tolls|highways . |
units |
Optional | Gibt die Messmethode (metrisch oder imperial) bei der Anzeige an
Entfernungen in den Ergebnissen anzeigen. Wenn units nicht angegeben ist, gilt:
origin Land der Abfrage bestimmt die zu verwendenden Einheiten. |
metric oder imperial |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Durch Kommas getrennte Werte für Breiten- und Längengrad sind zulässig. Beispiel:
37.4218,-122.0840 |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte von 0 (weltweit) bis 21
(einzelne Gebäude). Der obere Grenzwert kann je nach Kartendaten variieren.
an dem ausgewählten Ort verfügbar sind. |
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 an. Standardmäßig sehen Besucher eine eigene Karte. Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. wenn das gewünschte Sprache für den Kachelsatz nicht unterstützt wird, ist der Standardsprache für diesen Kachelsatz verwendet wird. | |
region |
Optional | Definiert die entsprechenden Rahmen und Beschriftungen, die angezeigt werden sollen, basierend auf geopolitische Sensibilitäten. | Akzeptiert einen Regionscode aus zwei Zeichen (nicht numerisch) Zuordnung des Unicode-Regions-Subtags zur bekannten ccTLD („Top-Level-Domain“) aus zwei Zeichen bestehen. Weitere Informationen finden Sie unter Google Maps Platform Abdeckungsdetails für unterstützte Regionen. |
streetview
-Modus
Mit der Maps Embed API können Sie Street View-Bilder von ausgewählten Standorten im gesamten Abdeckung. Nutzer eigene 360°-Fotos und Ausgewählte Street View-Sammlungen sind ebenfalls verfügbar.
Jedes Street View-Panorama bietet eine vollständige 360-Grad-Ansicht von einem
Standort. Bilder bieten eine horizontale 360-Grad-Ansicht (eine vollständige Rundumansicht).
und 180-Grad-Vertikalsicht (von senkrecht nach oben bis senkrecht nach unten). Die
Der streetview
-Modus stellt einen Viewer bereit, der das resultierende
Panorama als Kugel mit einer Kamera im Mittelpunkt. Sie können die Kamera
um den Zoom und die Ausrichtung der Kamera 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 durch Kommas getrennten Breiten- und Längengrad Werte (46.414382,10.013988
) Die API zeigt das Panorama am nächsten fotografiert haben. Da Street View-Bilder regelmäßig aktualisiert werden. Die Fotos können leicht von der Positionen jedes Mal angezeigt wird, kann es sein, dass Ihr Standort in eine andere wenn das Bild aktualisiert wird.pano
ist eine spezifische Panorama-ID. Wenn Sie einepano
können Sie auch einenlocation
angeben. Dielocation
wird nur verwendet, wenn die API das Panorama nicht finden kann. ID.
Folgende URL-Parameter sind optional:
Parameter | Typ | Beschreibung | Gültige Werte |
---|---|---|---|
heading |
Optional | Gibt die Kompassrichtung der Kamera in Grad im Uhrzeigersinn an aus Norden. | Wert in Grad zwischen -180° und 360° |
pitch |
Optional | gibt den Winkel der Kamera nach oben oder unten an. Positive Werte führen zu einer die Kamera nach oben, bei negativen Werten wird die Kamera nach unten gerichtet. Die Die Standardneigung von 0° richtet sich nach der Kameraposition, wenn das Bild aufgenommen wurde. Aus diesem Grund ist eine Neigung von 0° häufig, aber nicht immer horizontal. Ein Bild, das auf einem Hügel aufgenommen wurde, haben einen Standardneigungswinkel, der nicht horizontal ist. | Wert in Grad zwischen -90 und 90 ° |
fov |
Optional | bestimmt das horizontale Sichtfeld des Bildes. Es ist standardmäßig 90° eingestellt. Bei einem Darstellungsbereich mit fester Größe kann als Zoomstufe betrachtet werden, wobei kleinere Zahlen mit einer höheren Zoomstufe. | Wert in Grad mit einem Bereich von 10° bis 100° |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Durch Kommas getrennte Werte für Breiten- und Längengrad sind zulässig. Beispiel:
37.4218,-122.0840 |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte von 0 (weltweit) bis 21
(einzelne Gebäude). Der obere Grenzwert kann je nach Kartendaten variieren.
an dem ausgewählten Ort verfügbar sind. |
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 an. Standardmäßig sehen Besucher eine eigene Karte. Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. wenn das gewünschte Sprache für den Kachelsatz nicht unterstützt wird, ist der Standardsprache für diesen Kachelsatz verwendet wird. | |
region |
Optional | Definiert die entsprechenden Rahmen und Beschriftungen, die angezeigt werden sollen, basierend auf geopolitische Sensibilitäten. | Akzeptiert einen Regionscode aus zwei Zeichen (nicht numerisch) Zuordnung des Unicode-Regions-Subtags zur bekannten ccTLD („Top-Level-Domain“) aus zwei Zeichen bestehen. Weitere Informationen finden Sie unter Google Maps Platform Abdeckungsdetails für unterstützte Regionen. |
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, entweder durch
mit einem Standort im Suchbegriff (record+stores+in+Seattle
) oder
indem Sie die Parameter center
und zoom
zum Einbinden der Suche verwenden.
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 können geografische Einschränkungen,
wie in+Seattle oder near+98033 . |
center |
Optional | Definiert den Mittelpunkt der Kartenansicht. | Durch Kommas getrennte Werte für Breiten- und Längengrad sind zulässig. Beispiel:
37.4218,-122.0840 |
zoom |
Optional | Legt die anfängliche Zoomstufe der Karte fest. | Werte von 0 (weltweit) bis 21
(einzelne Gebäude). Der obere Grenzwert kann je nach Kartendaten variieren.
an dem ausgewählten Ort verfügbar sind. |
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 an. Standardmäßig sehen Besucher eine eigene Karte. Sprache. Dieser Parameter wird nur für einige Länderkacheln unterstützt. wenn das gewünschte Sprache für den Kachelsatz nicht unterstützt wird, ist der Standardsprache für diesen Kachelsatz verwendet wird. | |
region |
Optional | Definiert die entsprechenden Rahmen und Beschriftungen, die angezeigt werden sollen, basierend auf geopolitische Sensibilitäten. | Akzeptiert einen Regionscode aus zwei Zeichen (nicht numerisch) Zuordnung des Unicode-Regions-Subtags zur bekannten ccTLD („Top-Level-Domain“) aus zwei Zeichen bestehen. Weitere Informationen finden Sie unter Google Maps Platform Abdeckungsdetails für unterstützte Regionen. |
Orts-ID-Parameter
Die Maps Embed API unterstützt die Verwendung von Orts-IDs anstelle der Angabe eines Ortsname oder -adresse. Orts-IDs lassen sich zuverlässig einen Ort zu identifizieren. Weitere Informationen finden Sie in der Dokumentation zur Google Places API.
Die Maps Embed API akzeptiert Orts-IDs für die folgende 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. Die
Der folgende Code gibt New York City Hall als Startpunkt für eine Route an.
Anfrage: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
legt einen in Metern angegebenen Radius fest, in dem nach einem Panorama, das auf dem angegebenen Breiten- und Längengrad zentriert ist. 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:default
verwendet die Standardquellen für Street View. Suchanfragen sind nicht auf bestimmte Quellen beschränkt.outdoor
schränkt die Suchanfragen auf Außenansichten ein. Für den Innenbereich Sammlungen erscheinen nicht in den Suchergebnissen. Beachten Sie, dass Panoramen im Freien ist möglicherweise für den angegebenen Standort nicht vorhanden. Beachten Sie außerdem, dass die Suche gibt Panoramen zurück, bei denen festgestellt werden kann, ob sie sich in Innenräumen befinden. oder im Freien. 360°-Fotos werden beispielsweise nicht zurückgegeben, weil sie unbekannt sind. egal ob drinnen oder draußen.