Eine Karte einbetten

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

URL für die Maps Embed API erstellen

Über die folgende 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 du die Maps Embed API auf deiner Webseite verwenden möchtest, lege die von dir erstellte URL als Wert für das Attribut src eines iFrames fest. Sie können die Kartengröße über die Attribute height und width des iFrames 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, damit bestimmte Kartenbereiche im Vollbildmodus angezeigt werden können.
• Die Eigenschaften frameborder="0" und style="border:0", um den Standard-iFrame-Rahmen aus der Karte zu entfernen.
• Das Attribut referrerpolicy="no-referrer-when-downgrade", damit der Browser die vollständige URL als Referer-Header mit der Anfrage senden kann, damit die Einschränkungen des API-Schlüssels richtig 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 in der Regel einfacher ist, mit größeren Karten zu interagieren. Hinweis: Eingebettete Karten ab einer Größe von 200 Pixeln werden nicht 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, fügen Sie dem iFrame wie im obigen Beispiel das Attribut referrerpolicy hinzu, um explizit zuzulassen, 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 Gruppe von Anzeigen, die auf einer Karte dargestellt werden, können ohne Vorankündigung geändert werden.

Kartenmodi auswählen

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

• place: Mit dieser Option 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ück
• directions: Zeigt den Pfad zwischen zwei oder mehr angegebenen Punkten auf der Karte sowie die Entfernung und Reisezeit an.
• streetview: zeigt interaktive Panoramaansichten von bestimmten Orten an.
• search: zeigt Ergebnisse für eine Suche in der sichtbaren Kartenregion 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:

view-Modus

Im folgenden Beispiel werden der view-Modus und der optionale maptype-Parameter 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

Sie können folgende Parameter verwenden:

directions-Modus

Im folgenden Beispiel wird der directions-Modus verwendet, um die Strecke zwischen Oslow und Telemark in Norwegen sowie die Entfernung und Reisezeit unter Vermeidung von 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:

streetview-Modus

Mit der Maps Embed API können Sie Street View-Bilder als interaktive Panoramen von bestimmten Orten über die Abdeckung hinweg anzeigen. 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 Orts. Die Bilder enthalten eine 360-Grad-Horizontalsicht (vollständige Rundumsicht) und eine 180-Grad-Vertikalsicht (von senkrecht oben bis senkrecht unten). Im streetview-Modus 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:

• In location werden Breiten- und Längengrade als kommagetrennte Werte (46.414382,10.013988) akzeptiert. Die API zeigt das Panorama an, das diesem Standort am nächsten ist. Da Street View-Bilder regelmäßig aktualisiert werden und jedes Mal Fotos an 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 spezifische Panorama-ID. Wenn du ein pano angibst, kannst du auch einen location-Wert angeben. location wird nur verwendet, wenn die API die Panorama-ID nicht finden kann.

Folgende URL-Parameter sind optional:

search-Modus

Im Modus Search werden Ergebnisse für eine Suche im sichtbaren Kartenbereich angezeigt. Wir empfehlen, einen Standort für die Suche festzulegen. Dazu nehmen Sie entweder einen Ort in den Suchbegriff auf (record+stores+in+Seattle) oder nehmen die Parameter center und zoom auf, 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:

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.

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 einer Routenanfrage festgelegt: 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 schränkt Street View-Suchanfragen auf ausgewählte Quellen ein. 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. Indoor-Sammlungen werden nicht in die Suchergebnisse einbezogen. Möglicherweise sind für den angegebenen Ort keine Außenansichten vorhanden. Beachten Sie auch, dass bei der Suche nur Panoramen zurückgegeben werden, bei denen festgestellt werden kann, ob sie sich im Innen- oder Außenbereich befinden. 360°-Fotos werden beispielsweise nicht zurückgegeben, da nicht bekannt ist, ob sie sich drinnen oder draußen befinden.