Entwickler können eine Waze-Echtzeit-Karte auf ihrer Website einbetten. Auf der Echtzeit-Karte können Besucher nach Orten suchen und sich auf Grundlage der Echtzeit-Kartendaten von Waze Verkehrsinformationen in Echtzeit ansehen.
Die Echtzeit-Karte von Waze betten Sie mithilfe eines iFrames in Ihre Website ein. Die Ausgabe sieht dann so aus:
Standardmäßig enthält die Echtzeitkarte links unten einen Link zu den Such- und Routenoptionen dieser Karte.
Beispiele für zusätzliche Konfigurationsoptionen für Echtzeitkarten finden Sie unter Beispiele.
So betten Sie einen iFrame mit Waze Live Map ein:
- Öffnen Sie die Webseite in einem Texteditor.
- Um einen iFrame auf Ihrer Webseite zu generieren, fügen Sie den iFrame-Code auf der Webseite ein.
- Öffnen Sie die Echtzeit-Karte von Waze und suchen Sie Ihren Standort entweder in der Suchleiste oder durch Vergrößern und Klicken auf ein bestimmtes Segment der Karte.
- Klicken Sie rechts unten auf der Karte auf das Freigabesymbol
. Nun sollte ein Pop-up-Fenster mit einem benutzerdefinierten Einbettungscode angezeigt werden. Kopieren Sie den Code und fügen Sie ihn in den Textkörper Ihrer Webseite ein.
Beispiel
Im folgenden Beispiel sehen Sie, wie Sie die Echtzeit-Karte in Ihre Website einbetten. Aktualisieren Sie die URL-Parameter für Ihren Anwendungsfall.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Wenn Sie den iFrame in eine responsive Website einbetten möchten, empfehlen wir Ihnen, gängige CSS-Techniken zu verwenden, um die iFrame-Größe automatisch anhand der Bildschirmgröße festzulegen.
URL-Parameter
In der folgenden Tabelle werden die Parameter des Waze-iFrames beschrieben:
| Parameter | Erforderlich? | Beschreibung |
|---|---|---|
desc |
Optional | Legen Sie diesen Parameter auf einen beliebigen Wert fest, um einen beschreibenden Textblock in der Echtzeit-Karte anzuzeigen. Sender verwenden diesen Text, um Wazern aktuelle Informationen zur Verfügung zu stellen. Eine manuelle Aktualisierung der Websites ihrer Sender ist nicht erforderlich. Der gesamte Text wird von Waze erstellt und überprüft, ob die Inhalte korrekt sind. |
lat |
Erforderlich | Der Breitengrad des Kartenmittelpunkts. |
lon |
Erforderlich | Der Längengrad des Kartenmittelpunkts. |
pin |
Optional | Geben Sie 1 ein, um eine Markierung in der Mitte der Karte zu platzieren. Beispiel: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
Erforderlich | Der Grad der Vergrößerung der Karte, wenn sie geöffnet wird. Der Mindestwert ist 3 (geringste Vergrößerung). Der Höchstwert ist 17 (größte Vergrößerung). |
Lokalisierung
Der standardmäßige Sprachcode ist Englisch. Weitere Informationen finden Sie unter iFrame lokalisieren.
Das folgende Beispiel zeigt, wie Sie die Anzeigesprache ändern:
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Richtlinien
Wenn Sie die Waze-Echtzeit-Karte auf Ihrer Website einbetten möchten, müssen Sie die folgenden Richtlinien einhalten:
- Verbinden Sie Waze nicht mit einer anderen Karte als Waze.
- Verwenden Sie keine Waze-Marken (Logo, Symbole usw.) mit Karten, die nicht von Waze stammen.
Beispiele
In den folgenden Beispielen sehen Sie, wie die Parameter kombiniert werden, um der Live-Karte verschiedene visuelle Elemente hinzuzufügen:
Beispiel 1
In der folgenden iFrame-Implementierung wird die Markierung auf der Karte angezeigt.
Manhattan, New York (mit Stecknadel):
Für den iFrame wird der folgende Code verwendet:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>
Beispiel 2
Die folgende iFrame-Implementierung zeigt die Markierung auf der Karte und enthält den beschreibenden Text.
San Paulo (mit Markierung und Beschreibung):
Für den iFrame wird der folgende Code verwendet:
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>
Beispiel 3
In der folgenden iFrame-Implementierung wird die Markierung auf der Karte angezeigt.
Paris, Frankreich (mit Stecknadel):
Für den iFrame wird der folgende Code verwendet:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>
Waze-Entwickler-Community kontaktieren
Weitere Informationen erhalten Sie im Forum der Waze-Entwickler-Community.