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 y ver actualizaciones del tráfico en tiempo real según los datos del mapa en tiempo real de Waze.
Incorporas el mapa en tiempo real de Waze en tu sitio web con 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 del 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, haz lo siguiente:
- Abre tu página web en un editor de texto.
- Para generar un iframe en tu página web, agrega el código iframe a tu página web.
- Abre el mapa en tiempo real de Waze. busca tu ubicación ya sea en la barra de búsqueda, o bien acercando la imagen y haciendo clic en una ubicación segmento del mapa.
- Haz clic en el ícono para compartir
ubicado en la esquina inferior derecha de la
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 en tu sitio web. Actualiza la 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 insertar el iframe en un sitio web adaptable, te recomendamos que utilices técnicas comunes de CSS para establecer el tamaño del iframe automáticamente en función del 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 brindar información actualizada a los Wazers, sin necesidad de actualizaciones manuales a las operaciones sitios web. Waze crea todo el texto y garantiza que el contenido es correcta. |
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 (mínima ampliación). El valor máximo es 17 (el valor ampliación). |
Localización
El código de idioma predeterminado es inglés. Para obtener más información, consulta Localización el iframe.
En el siguiente ejemplo, se indica 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 de ninguna manera con el uso de un mapa que no sea de Waze.
- No uses materiales de la marca Waze (logotipos, íconos, etc.) 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
La siguiente implementación de iframe 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
La siguiente implementación de iframe muestra el marcador del mapa y 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
La siguiente implementación de iframe 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 los desarrolladores de Waze Comunidad
Para obtener más información, únete a la conversación en el Programadores de Waze Foro de la comunidad.