Eine Karte einbetten

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" und style="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 als Referer-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: Hiermit wird eine Markierung auf der Karte für einen bestimmten Ort oder eine bestimmte Adresse angezeigt. etwa eine Sehenswürdigkeit, ein Unternehmen, ein geografisches Element oder eine Stadt.
• view: gibt eine Karte ohne Markierungen oder Wegbeschreibungen zurück
• directions: 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:

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
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Es können folgende Parameter verwendet werden:

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:

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 Panoramabild anzuzeigen, wenn das Bild aktualisiert wird.

• pano ist eine spezifische Panorama-ID. Wenn Sie eine pano können Sie auch einen location angeben. Die location wird nur verwendet, wenn die API das Panorama nicht finden kann. ID.

Folgende URL-Parameter sind optional:

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:

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.