Gli sviluppatori possono incorporare una Live Map di Waze sul proprio sito web. La Live Map permette ai visitatori di cercare località e visualizzare aggiornamenti sul traffico in tempo reale in base ai dati delle mappe in tempo reale di Waze.
Puoi incorporare la Live Map di Waze nel tuo sito web utilizzando un iFrame, in modo da ottenere un output simile al seguente:
Per impostazione predefinita, la Live Map include un link alle opzioni di ricerca ed elaborazione del percorso di questa mappa nell'angolo in basso a sinistra.
Per ulteriori possibili opzioni di configurazione della Live Map, consulta gli esempi.
Per incorporare un iFrame nella Live Map di Waze:
- Apri la pagina web in un editor di testo.
- Per generare un iFrame nella pagina web, aggiungi ad essa il codice dell'iFrame.
- Apri la Live Map di Waze, cerca la tua località nella barra di ricerca o aumentando lo zoom e facendo clic su un segmento specifico della mappa.
- Fai clic sull'icona di condivisione
nell'angolo in basso a destra della
mappa. Dovrebbe apparire un popup con un codice di incorporamento personalizzato. Copia e incolla il codice nel corpo della pagina web.
Esempio
Il seguente esempio mostra come incorporare la Live Map nel tuo sito web. Aggiorna i parametri URL in base al 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 adattabile, ti consigliamo di utilizzare tecniche CSS comuni per impostare automaticamente la dimensione dell'iFrame, in base alle dimensioni dello schermo.
Parametri URL
La seguente tabella descrive i parametri dell'iFrame di Waze:
| Parametro | Obbligatorio? | Descrizione |
|---|---|---|
desc |
Facoltativo | Imposta questo parametro su qualsiasi valore per visualizzare un blocco di testo descrittivo nella Live Map. I Broadcasters utilizzano questo testo per fornire informazioni aggiornate ai wazer, senza dover apportare aggiornamenti manuali ai siti web delle proprie stazioni. Tutto il testo viene creato da Waze garantendo che il contenuto sia corretto. |
lat |
Obbligatorio | La latitudine del punto centrale della mappa. |
lon |
Obbligatorio | La longitudine del punto centrale della mappa. |
pin |
Facoltativo | Impostalo su 1 per inserire 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 più basso è 3 (ingrandimento minimo). Il valore più elevato è 17 (ingrandimento massimo). |
Localizzazione
Il codice lingua predefinito è l'inglese. Per ulteriori informazioni, consulta la sezione Localizzare l'iFrame.
Il seguente esempio mostra come cambiare 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 di Waze sul tuo sito, devi rispettare le seguenti linee guida:
- Non associare in nessun modo Waze all'utilizzo di una mappa non Waze.
- Non utilizzare materiali contenenti il brand Waze (logo, icone ecc.) con mappe non Waze.
Esempi
I seguenti esempi mostrano l'utilizzo di combinazioni dei parametri per aggiungere diversi elementi visivi alla Live Map:
Esempio 1
La seguente implementazione dell'iframe mostra il segnaposto sulla 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 sulla 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 sulla 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>