Los desarrolladores pueden incorporar un mapa en tiempo real de Waze a su sitio web. El mapa en tiempo real permite a los visitantes buscar ubicaciones y ver actualizaciones del tráfico en tiempo real según los datos del mapa de Waze en tiempo real.
Incorpora el mapa en tiempo real de Waze a tu sitio web mediante un iframe, de modo que el resultado se vea de la siguiente manera:
De forma predeterminada, el mapa en tiempo real incluye un vínculo a las opciones de búsqueda y ruta de este mapa en la esquina inferior izquierda.
Para ver ejemplos de opciones adicionales de configuración de mapas en tiempo real, consulta Ejemplos.
Para incorporar un iframe con el mapa en tiempo real de Waze, sigue estos pasos:
- Abre tu página web en un editor de texto.
- Para generar un iframe en su página web, agregue el código correspondiente a su página web.
- Abre el mapa en tiempo real de Waze, busca tu ubicación en la barra de búsqueda, o bien acerca la imagen y haz clic en un segmento específico del mapa.
- Haz clic en el ícono de compartir
en la esquina inferior derecha del mapa. Debería aparecer una ventana emergente con un código de incorporación personalizado. Copia y pega el código en el cuerpo de tu página web.
Ejemplo
En el siguiente ejemplo, se muestra cómo incorporar el mapa en tiempo real a tu sitio web. Actualiza los parámetros de URL para tu caso de uso.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Para incorporar el iFrame a un sitio web responsivo, te recomendamos que uses técnicas de CSS comunes a fin de configurar el tamaño del iFrame automáticamente, según el tamaño de la pantalla.
Parámetros de URL
En la siguiente tabla, se describen los parámetros del iFrame de Waze:
| Parámetro | ¿Obligatorio? | Descripción |
|---|---|---|
desc |
Opcional | Establece este parámetro en cualquier valor para mostrar un bloque de texto descriptivo en el mapa en tiempo real. Las emisoras utilizan este texto para proporcionar información actualizada a los Wazers, sin necesidad de actualizar manualmente los sitios web de sus estaciones. Waze crea todo el texto, lo que garantiza que el contenido sea correcto. |
lat |
Obligatorio | La latitud del punto central del mapa. |
lon |
Obligatorio | Es la longitud del punto central del mapa. |
pin |
Opcional | Establece el valor en 1 para colocar un pin en el centro del mapa. Por ejemplo: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
Obligatorio | El nivel de ampliación del mapa cuando se abre. El valor mínimo es 3 (menor ampliación). El valor máximo es 17 (mayor aumento). |
Localización
El código de idioma predeterminado es inglés. Para obtener más información, consulta Cómo localizar el iFrame.
En el siguiente ejemplo, se muestra cómo cambiar el idioma de visualización:
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Lineamientos
Para incorporar el mapa en tiempo real de Waze a tu sitio, debes cumplir con los siguientes lineamientos:
- De ninguna manera asocies Waze con el uso de un mapa que no sea de Waze.
- No utilices materiales de marca Waze (logotipos, íconos, etc.) con mapas que no sean de Waze.
Ejemplos
En los siguientes ejemplos, se muestra cómo usar combinaciones de parámetros para agregar diferentes elementos visuales al mapa en tiempo real:
Ejemplo 1
En la siguiente implementación de iframe, se muestra el pin del mapa.
Manhattan, Nueva York (con pin):
El iframe usa el siguiente código:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>
Ejemplo 2
En la siguiente implementación de iframe, se muestra el pin del mapa y se incluye el texto descriptivo.
San Pablo (con pin y descripción):
El iframe usa el siguiente código:
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>
Ejemplo 3
En la siguiente implementación de iframe, se muestra el pin del mapa.
París, Francia (con pin):
El iframe usa el siguiente código:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>
Comunícate con la comunidad de desarrolladores de Waze
Si deseas obtener más información, únete a la conversación en el foro de la comunidad de desarrolladores de Waze.