Gli sviluppatori possono incorporare una live map Waze sul proprio sito web. La live map consente ai visitatori di cercare località e visualizzare gli aggiornamenti sul traffico in tempo reale in base ai dati della mappa in tempo reale di Waze.
Incorpora la live map Waze nel tuo sito web utilizzando un iframe, in modo che l'output sia simile al seguente:
Per impostazione predefinita, la live map include un link alle opzioni di ricerca e indicazioni stradali di questa mappa nell'angolo in basso a sinistra.
Per esempi di opzioni di configurazione aggiuntive della live map, vedi Esempi.
Per incorporare un iframe con la live map Waze:
- Apri la pagina web in un editor di testo.
- Per generare un iframe nella pagina web, aggiungi il codice iframe alla pagina web.
- Apri la live map Waze, cerca la tua località nella barra di ricerca o ingrandisci e fai clic su un segmento specifico della mappa.
- Fai clic sull'icona di condivisione
nell'angolo in basso a destra della
mappa. Verrà visualizzato un popup con un codice di incorporamento personalizzato. Copia e incolla il codice nel corpo di della pagina web.
Esempio
L'esempio seguente mostra come incorporare la live map nel tuo sito web. Aggiorna i parametri URL per il tuo caso d'uso.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Per incorporare l'iframe in un sito web responsive, ti consigliamo di utilizzare tecniche CSS comuni per impostare automaticamente le dimensioni dell'iframe in base alle dimensioni dello schermo.
Parametri URL
La seguente tabella descrive i parametri dell'iframe Waze:
| Parametro | Obbligatorio? | Descrizione |
|---|---|---|
desc |
Facoltativo | Imposta questo parametro su qualsiasi valore per visualizzare un blocco di testo descrittivo nella live map. I broadcaster utilizzano questo testo per fornire informazioni aggiornate agli utenti Waze, senza la necessità di aggiornamenti manuali ai siti web delle loro stazioni. Tutto il testo viene creato da Waze per garantire la correttezza dei contenuti è corretta. |
lat |
Obbligatorio | La latitudine del punto centrale della mappa. |
lon |
Obbligatorio | La longitudine del punto centrale della mappa. |
pin |
Facoltativo | Imposta su 1 per posizionare un segnaposto al centro della mappa. Ad esempio: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
Obbligatorio | Il livello di ingrandimento della mappa quando viene aperta. Il valore minimo è 3 (ingrandimento minimo). Il valore massimo è 17 (ingrandimento massimo). |
Localizzazione
Il codice lingua predefinito è l'inglese. Per ulteriori informazioni, vedi Localizzare l'iframe.
L'esempio seguente mostra come modificare la lingua di visualizzazione:
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Linee guida
Per incorporare la live map Waze sul tuo sito, devi rispettare le seguenti linee guida:
- Non associare Waze all'utilizzo di una mappa non Waze in alcun modo.
- Non utilizzare materiali con il brand Waze (logo, icone e così via) con mappe non Waze.
Esempi
Gli esempi seguenti mostrano l'utilizzo di combinazioni di parametri per aggiungere diversi elementi visivi alla live map:
Esempio 1
La seguente implementazione dell'iframe mostra il segnaposto della mappa.
Manhattan, New York (con segnaposto):
L'iframe utilizza il seguente codice:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>Esempio 2
La seguente implementazione dell'iframe mostra il segnaposto della mappa e include il testo descrittivo.
San Paolo (con segnaposto e descrizione):
L'iframe utilizza il seguente codice:
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>Esempio 3
La seguente implementazione dell'iframe mostra il segnaposto della mappa.
Parigi, Francia (con segnaposto):
L'iframe utilizza il seguente codice:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>Contattare la community degli sviluppatori Waze
Per ulteriori informazioni, partecipa alla conversazione nel forum della community degli sviluppatori Waze.