Eine Karte einbetten

In dieser Anleitung wird beschrieben, 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 mit Ihrem 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 folgenden zusätzlichen Properties verwendet:

• Die Eigenschaft allowfullscreen, mit der bestimmte Kartenteile im Vollbildmodus angezeigt werden können.
• Die Eigenschaften frameborder="0" und style="border:0", um den standardmäßigen IFrame-Rahmen um die Karte herum zu entfernen.
• Das Attribut referrerpolicy="no-referrer-when-downgrade", mit dem der Browser die vollständige URL als Referer-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 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 die 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 Anzeigen 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ück
• directions: Zeigt den Pfad 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: Die Suchergebnisse werden im sichtbaren Kartenbereich angezeigt.

place-Modus

In der folgenden URL wird der place-Kartenmodus verwendet, um am Eiffelturm eine Kartenmarkierung 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:

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:

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

Es können folgende Parameter verwendet werden:

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 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 bieten eine horizontale 360-Grad-Ansicht (eine vollständige Rundumansicht) und eine 180-Grad-Vertikalsicht (von senkrecht nach oben nach 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 Ausrichtung 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 einen Breiten- und einen Längengrad als kommagetrennte Werte (46.414382,10.013988). Die API zeigt das Panorama an, das diesem Standort am nächsten ist. 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 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:

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:

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

  • 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. Es kann deshalb vorkommen, dass als Panoramen für den angegebenen Ort keine Außenansichten vorhanden sind. Außerdem werden bei der Suche nur Panoramen zurückgegeben, bei denen festgestellt werden kann, ob sie sich im Innen- oder Außenbereich befinden. So werden beispielsweise keine Fotosphären zurückgegeben, da nicht bekannt ist, ob sie drinnen oder draußen aufgenommen wurden.