Google Maps Platform permite a los clientes desarrollar experiencias únicas mediante la personalización del diseño visual de sus marcadores de mapa con Marcadores avanzados. En este documento, exploraremos cómo los clientes pueden ir un paso más allá y crear marcadores que cambien de forma dinámica en función de los datos en tiempo real.
Los marcadores de mapa son una herramienta útil para proporcionar experiencias de mapas enriquecidas a los usuarios. Los atributos de los marcadores, como el tamaño, el color y la forma, pueden transmitir información adicional sobre cada ubicación marcada. En algunos casos, esta información adicional puede cambiar de forma dinámica, y es posible que el desarrollador quiera que se actualice la visualización del mapa, lo que mantiene una sensación de actualidad para el usuario.
En este documento, usamos un ejemplo con fines ilustrativos: una cadena de tiendas minoristas quiere usar un mapa para que los usuarios puedan ver los tiempos de espera en las tiendas. Sin embargo, esta misma arquitectura se podría usar para muchos otros casos de uso. Aquí tienes algunas ideas adicionales:
- Disponibilidad de habitaciones de hotel: En un mapa que muestra los resultados de la búsqueda de hoteles, la actualidad de la disponibilidad de habitaciones es un indicador importante que puede alentar a los usuarios a hacer una reserva de hotel a medida que disminuye el inventario.
- Disponibilidad de espacios de estacionamiento: En un mapa de estacionamientos, brinda a los usuarios la confianza para seleccionar un destino que tendrá un espacio para ellos cuando lleguen.
- Restaurantes abiertos, que cerrarán pronto y cerrados: En un mapa que muestra los resultados de la búsqueda de restaurantes , es importante que los usuarios sepan si un restaurante puede estar cerrado cuando lleguen.
La solución de Marcadores avanzados dinámicos
Puedes crear un mapa con marcadores avanzados para visualizar datos dinámicos. Como se mencionó anteriormente, el caso de uso es una cadena de tiendas minoristas que aprovecha su sistema de administración de colas de pago para estimar y visualizar los tiempos de espera de los usuarios. Esta es la arquitectura de la aplicación:
Paso 1: Determina los atributos para definir la experiencia visual
El primer paso es determinar una o más propiedades de ubicación para mostrar a los usuarios. En este caso, queremos mostrar solo una propiedad: el tiempo de espera actual en cada ubicación de la tienda, medido en minutos.
El siguiente paso es seleccionar uno o más atributos de marcador correspondientes para anotar visualmente el tiempo de espera en el marcador del mapa. La lista de atributos de marcador está disponible de inmediato en la PinElement. También puedes usar HTML personalizado para obtener opciones de personalización más enriquecidas.
En este ejemplo, usaremos dos atributos de marcador para visualizar los datos del tiempo de espera:
- Color del marcador: Azul para un tiempo de espera inferior a 5 minutos y amarillo para un tiempo de espera superior a 5 minutos
- Contenido del marcador (requiere marcadores HTML personalizados): Incluiremos el tiempo de espera actual en minutos en el marcador.
Paso 2: Configura la conexión a fuentes de datos en tiempo real
Existen varias formas de conectarse a fuentes de datos, y la solución adecuada depende de tu caso de uso y de la infraestructura técnica. En este ejemplo, usamos un enfoque de extracción, en el que solicitamos los datos actualizados del tiempo de espera con solicitudes HTTP (REST) de forma regular. En las siguientes secciones, verás arquitecturas alternativas que aprovechan los enfoques de inserción.
Para permitir que nuestra aplicación acceda a los datos del tiempo de espera de nuestro servidor, nuestra arquitectura aprovecha Cloud Functions para Firebase. Cloud Functions nos permite definir una función de backend para acceder a estos datos y procesarlos. También incluimos la biblioteca de Firebase en nuestra aplicación web, lo que nos permite acceder a nuestra Cloud Function con una solicitud HTTP request.
El siguiente paso es asegurarnos de que los datos se mantengan actualizados para el usuario. Para ello, configuramos un temporizador con la función setInterval de JavaScript con un tiempo de espera de 30 segundos. Cada vez que se activa el temporizador, solicitamos datos actualizados del tiempo de espera como se describió anteriormente. Una vez que obtenemos los datos nuevos, debemos actualizar la apariencia de los marcadores del mapa. En el siguiente paso, se explica cómo realizar esos cambios.
Paso 3: Renderiza los marcadores del mapa
Ahora podemos usar Marcadores avanzados para renderizar los marcadores estilizados en el mapa. Los marcadores avanzados se pueden renderizar en mapas creados por la API de Maps Javascript de Google Maps Platform. Cuando uses marcadores avanzados, asegúrate de incluir el parámetro map ID en la solicitud de mapa JS.
En el siguiente fragmento de código, creamos los marcadores y definimos el contenido del marcador mediante la creación de un elemento div HTML:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
El paso final es actualizar el texto del marcador y el estilo CSS de cada tienda. El siguiente código lee los datos actualizados del tiempo de espera y asigna un estilo a cada pin de la tienda según el tiempo de espera:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
Ahora, el mapa usa nuestra API de tiempos de espera existente para visualizar los tiempos de espera actualizados para los usuarios:
Formas alternativas de conectarse a fuentes de datos en tiempo real
Existen varias formas de conectarse a fuentes de datos en tiempo real. A continuación, revisamos dos opciones alternativas: Firebase Cloud Messaging y WebSockets. Cualquiera sea el enfoque que selecciones, asegúrate de tener en cuenta los siguientes factores para que tu herramienta de mapa siga funcionando correctamente:
- Frecuencia de las actualizaciones
- Volumen de datos
- Cantidad de marcadores en la vista de mapa
- Capacidades de hardware y navegador
Firebase Cloud Messaging
Firebase Cloud Messaging es un enfoque de inserción. Con este enfoque, enviarás actualizaciones a la aplicación de mapa cada vez que se actualicen los datos del tiempo de espera en el backend. Los mensajes de actualización activarán una función de devolución de llamada cuyo propósito es actualizar la apariencia y el contenido del marcador.
Una cosa que debes tener en cuenta antes de seleccionar esta arquitectura es que requiere mantener una conexión persistente del servidor para cada navegador que ejecuta la aplicación de mapa. Por ese motivo, puede ser más costoso de ejecutar y menos sólido en el contexto de problemas de conectividad.
WebSockets
WebSockets es otro enfoque basado en la inserción para mantener actualizados los datos. Al igual que en la situación anterior, puedes usar WebSockets para establecer una conexión persistente entre tu backend y tu aplicación de mapa. Los beneficios funcionales de este enfoque son similares a los de Firebase Cloud Messaging. Sin embargo, es posible que se requiera trabajo adicional para configurar la infraestructura necesaria.
Conclusión
Los desarrolladores pueden combinar fuentes de datos en tiempo real con Marcadores avanzados para crear visualizaciones intuitivas en Google Maps. Existen varias formas de conectar estas fuentes de datos según los requisitos del mapa, el hardware y el navegador del usuario, y el volumen de datos. Luego, los datos integrados se pueden usar para controlar la apariencia de los Marcadores avanzados en tiempo real, lo que permite una experiencia dinámica para los usuarios.
Próximas acciones
Lecturas adicionales:
- Marcadores avanzados: Centro para desarrolladores de Google
- Cómo crear marcadores con código HTML personalizado
- Cloud Functions para Firebase
- Firebase Cloud Messaging
Colaboradores
Autores principales:
Jim Leflar | Google Maps Platform Ingeniero de soluciones
John Branigan | Ingeniero de Atención al cliente sénior de Google Cloud Platform
Steve Barrett | Ingeniero de soluciones de Google Maps Platform