Entwickler können eine Waze-Echtzeitkarte in ihre Website einbetten. Auf der Echtzeitkarte können Besucher nach Orten suchen und Verkehrsinformationen in Echtzeit auf Grundlage der Echtzeit-Kartendaten von Waze abrufen.
Sie betten die Waze-Echtzeitkarte mithilfe eines iFrame in Ihre Website ein. Die Ausgabe sieht dann so aus:
Standardmäßig enthält die Echtzeitkarte in der unteren linken Ecke einen Link zu den Such- und Routenoptionen dieser Karte.
Beispiele für zusätzliche Konfigurationsoptionen für die Echtzeitkarte finden Sie unter Beispiele.
So betten Sie ein iFrame mit der Waze-Echtzeitkarte ein :
- Öffnen Sie Ihre Webseite in einem Texteditor.
- Fügen Sie Ihrer Webseite den iFrame-Code hinzu, um ein iFrame zu generieren.
- Öffnen Sie die Waze-Echtzeitkarte, suchen Sie entweder in der Suchleiste nach Ihrem Standort oder zoomen Sie hinein und klicken Sie auf ein bestimmtes Segment der Karte.
- Klicken Sie rechts unten auf der
Karte auf das Freigabesymbol
. Ein Pop-up mit einem benutzerdefinierten Einbettungscode sollte angezeigt werden. Kopieren Sie den Code und fügen Sie ihn in den Textkörper Ihrer Webseite ein.
Beispiel
Das folgende Beispiel zeigt, wie Sie die Echtzeitkarte 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 das iFrame in eine responsive Website einbetten möchten, empfehlen wir, 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-iFrame beschrieben:
| Parameter | Erforderlich? | Beschreibung |
|---|---|---|
desc |
Optional | Legen Sie für diesen Parameter einen beliebigen Wert fest, um einen beschreibenden Textblock in der Echtzeitkarte anzuzeigen. Broadcaster können diesen Text verwenden, um Wazer auf dem Laufenden zu halten, ohne die Websites ihrer Sender manuell aktualisieren zu müssen. Alle Texte werden von Waze erstellt, um sicherzustellen, dass die Inhalte korrekt sind. |
lat |
Erforderlich | Der Breitengrad des Mittelpunkts der Karte. |
lon |
Erforderlich | Der Längengrad des Mittelpunkts der Karte. |
pin |
Optional | Legen Sie den Wert auf „1“ fest, 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 | Die Zoomstufe der Karte beim Öffnen. Der Mindestwert ist „3“ (geringste Vergrößerung). Der Höchstwert ist „17“ (größte Vergrößerung). |
Lokalisierung
Der Standardsprachcode ist Englisch. Weitere Informationen finden Sie unter Lokalisieren des iFrame.
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-Echtzeitkarte in Ihre Website einbetten möchten, müssen Sie die folgenden Richtlinien einhalten:
- Verbinden Sie Waze in keiner Weise mit der Verwendung einer Karte, die nicht von Waze stammt.
- Verwenden Sie keine Materialien mit Waze-Branding (Logo, Symbole usw.) mit Karten, die nicht von Waze stammen.
Beispiele
Die folgenden Beispiele zeigen, wie Sie mit Kombinationen der Parameter verschiedene visuelle Elemente zur Echtzeitkarte hinzufügen:
Beispiel 1
Die folgende iFrame-Implementierung zeigt die Kartenmarkierung.
Manhattan, New York (mit Markierung):
Das iFrame verwendet den folgenden Code:
<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 Kartenmarkierung und enthält den beschreibenden Text.
São Paulo (mit Markierung und Beschreibung):
Das iFrame verwendet den folgenden Code:
<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
Die folgende iFrame-Implementierung zeigt die Kartenmarkierung.
Paris, Frankreich (mit Markierung):
Das iFrame verwendet den folgenden Code:
<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 finden Sie im Forum der Waze-Entwickler-Community.