Les développeurs peuvent intégrer une carte Waze en temps réel sur leur site Web. Celle-ci permet aux visiteurs de rechercher des lieux et d'afficher des mises à jour du trafic en temps réel en fonction des données cartographiques en temps réel de Waze.
L'intégration de la carte Waze en temps réel sur votre site Web est effectuée à l'aide d'un iFrame, et le résultat se présente comme suit :
Par défaut, la carte en temps réel inclut un lien vers les options de recherche et d'itinéraire de cette carte dans l'angle inférieur gauche.
Pour obtenir des exemples d'options de configuration supplémentaires de la carte en temps réel, cliquez ici.
Pour intégrer un iFrame dans la carte Waze en temps réel, procédez comme suit :
- Ouvrez votre page Web dans un éditeur de texte.
- Pour générer un iFrame sur votre page Web, ajoutez votre code iFrame à cette dernière.
- Ouvrez la carte Waze en temps réel, recherchez votre position dans la barre de recherche. Vous pouvez aussi effectuer un zoom avant et cliquer sur un segment spécifique de la carte.
- Cliquez sur l'icône de partage
dans l'angle inférieur droit de la carte. Un pop-up s'affiche, avec un code d'intégration personnalisé. Copiez et collez le code dans le corps de votre page Web.
Exemple
L'exemple suivant montre comment intégrer la carte en temps réel sur votre site Web. Adaptez les paramètres d'URL à votre cas d'utilisation.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Pour intégrer l'iFrame dans un site Web responsive, nous vous recommandons d'utiliser des techniques CSS courantes afin de définir automatiquement la taille de l'iFrame, en fonction de la taille de l'écran.
Paramètres d'URL
Vous trouverez dans le tableau ci-dessous une description des paramètres de l'iFrame Waze :
| Paramètre | Obligatoire ? | Description |
|---|---|---|
desc |
Facultatif | Pour définir ce paramètre, choisissez la valeur de votre choix afin d'afficher un bloc de texte descriptif dans la carte en temps réel. Ce texte permet aux diffuseurs de fournir des informations actualisées aux wazers, sans mettre à jour manuellement les sites Web de leurs stations. L'ensemble du texte est créé par Waze, qui s'assure que le contenu est correct. |
lat |
Obligatoire | Latitude du point central de la carte. |
lon |
Obligatoire | Longitude du point central de la carte. |
pin |
Facultatif | Choisissez 1 pour placer un repère au centre de la carte. Exemple : <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
Obligatoire | Niveau de zoom de la carte lorsqu'elle est ouverte. La valeur inférieure est 3 (zoom minimal) et la valeur supérieure est 17 (zoom maximal). |
Localisation
Le code de langue par défaut est l'anglais. Pour plus d'informations, consultez la section Localisation de l'iFrame.
L'exemple ci-dessous indique comment changer de langue d'affichage :
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Consignes
Pour intégrer la carte Waze en temps réel sur votre site, vous devez respecter les consignes suivantes :
- N'associez pas Waze à l'utilisation d'une carte non Waze, de quelque manière que ce soit.
- N'utilisez pas d'éléments de la marque Waze (logo, icônes, etc.) avec des cartes non Waze.
Exemples
Les exemples suivants indiquent comment ajouter différents éléments visuels à la carte en temps réel en combinant les paramètres :
Exemple 1
L'intégration d'iFrame suivante affiche le repère de la carte.
Manhattan, New York (avec repère) :
L'iFrame utilise le code suivant :
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>
Exemple 2
L'intégration d'iFrame suivante affiche le repère de la carte et inclut le texte descriptif.
San Paulo (avec repère et description) :
L'iFrame utilise le code suivant :
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>
Exemple 3
L'intégration d'iFrame suivante affiche le repère de la carte.
Paris, France (avec repère) :
L'iFrame utilise le code suivant :
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>