Les développeurs peuvent intégrer une carte Waze en temps réel sur leur site Web. La carte en temps réel permet aux visiteurs de rechercher des lieux et de consulter des infos trafic en temps réel basées sur les 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 en bas à gauche.
Pour obtenir des exemples d'options de configuration supplémentaires de la carte en temps réel, consultez Exemples.
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 à votre page Web.
- 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
en bas à droite de la
carte. Une fenêtre pop-up devrait s'afficher 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 à votre site Web. Mettez à jour les paramètres d'URL pour 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 à un site Web responsif, nous vous recommandons d'utiliser des techniques CSS courantes pour définir automatiquement la taille de l'iFrame en fonction de la taille de l'écran.
Paramètres d'URL
Le tableau suivant décrit les paramètres de l'iFrame Waze :
| Paramètre | Obligatoire ? | Description |
|---|---|---|
desc |
Facultatif | Définissez ce paramètre sur n'importe quelle valeur pour afficher un bloc de texte descriptif dans la carte en temps réel. Les diffuseurs utilisent ce texte pour fournir des informations à jour aux Wazers, sans avoir à mettre à jour manuellement les sites Web de leurs stations. Tous les textes sont créés par Waze pour garantir l'exactitude du contenu est correct. |
lat |
Obligatoire | Latitude du point central de la carte. |
lon |
Obligatoire | Longitude du point central de la carte. |
pin |
Facultatif | Définissez la valeur sur 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 minimale est 3 (zoom le plus faible). La valeur maximale est 17 (zoom le plus élevé ). |
Localisation
Le code de langue par défaut est l'anglais. Pour en savoir plus, consultez Localiser l'iFrame.
L'exemple suivant montre comment modifier la 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 en aucun cas Waze à l'utilisation d'une carte non Waze.
- N'utilisez pas de supports de marque Waze (logo, icônes, etc.) avec des cartes non Waze.
Exemples
Les exemples suivants montrent comment utiliser des combinaisons de paramètres pour ajouter différents éléments visuels à la carte en temps réel :
Exemple 1
L'implémentation d'iframe suivante montre 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'implémentation d'iframe suivante montre le repère de la carte et inclut le texte descriptif.
São 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'implémentation d'iframe suivante montre 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>Contacter la communauté des développeurs Waze
Pour en savoir plus, rejoignez la conversation sur le forum de la communauté des développeurs Waze.