Los desarrolladores pueden incorporar un mapa en tiempo real de Waze en su sitio web. El mapa en tiempo real permite que los visitantes busquen ubicaciones y vean actualizaciones sobre el tráfico en tiempo real basadas en los datos del mapa en tiempo real de Waze.
Para incorporar el mapa en tiempo real de Waze a tu sitio web, usa 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 rutas de este mapa en la esquina inferior izquierda.
Para ver ejemplos de opciones de configuración adicionales del mapa 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 tu página web, agrega el código de iframe a tu página web.
- Abre el mapa en tiempo real de Waze, busca tu ubicación en la barra de búsqueda o acerca el mapa y haz clic en un segmento específico.
- Haz clic en el ícono para compartir
que se encuentra 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 comunes de CSS para establecer 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 usan este texto para proporcionar información actualizada a los Wazers, sin necesidad de realizar actualizaciones manuales en los sitios web de sus estaciones. Waze crea todo el texto, lo que garantiza que el contenido es correcto. |
lat |
Obligatorio | La latitud del punto central del mapa. |
lon |
Obligatorio | La longitud del punto central del mapa. |
pin |
Opcional | Establécelo 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 aumento del mapa cuando se abre. El valor mínimo es 3 (el menor aumento). El valor máximo es 17 (el mayor aumento). |
Localización
El código de idioma predeterminado es el 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 en tu sitio, debes cumplir con los siguientes lineamientos:
- No asocies Waze con el uso de un mapa que no sea de Waze de ninguna manera.
- No uses materiales de la marca Waze (logotipo, íconos, etcétera) con mapas que no sean de Waze.
Ejemplos
En los siguientes ejemplos, se muestra el uso de combinaciones de los 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.
Puerto Madero, Buenos Aires (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
Para obtener más información, únete a la conversación en el foro de la comunidad de desarrolladores de Waze.