Google Maps Platform permite que los clientes desarrollen experiencias únicas mediante la personalización del diseño visual de los marcadores de sus mapas mediante la función Marcadores avanzados. En este documento, exploraremos cómo los clientes pueden ir un paso más allá y crear marcadores que cambien dinámicamente según datos en tiempo real.
Los marcadores de mapas son una herramienta útil para proporcionar a los usuarios experiencias cartográficas enriquecedoras. Los atributos de marcador, como el tamaño, el color y la forma, pueden transmitir información adicional sobre cada ubicación marcada. En algunos casos, esa información adicional puede cambiar de forma dinámica y es posible que el desarrollador desee que se actualice la visualización del mapa para mantener una sensación de actualidad.
En este artículo, usamos un ejemplo con fines ilustrativos: una cadena de tiendas minoristas desea utilizar un mapa para mostrar los tiempos de espera de las tiendas a los usuarios. Sin embargo, esta misma arquitectura podría utilizarse para muchos otros casos de uso. Estas son algunas ideas adicionales:
- Disponibilidad de las habitaciones de hotel: En un mapa que muestra los resultados de la búsqueda de hoteles, la disponibilidad de las habitaciones es un indicador importante que puede alentar a los usuarios a hacer una reserva en un hotel a medida que disminuye el inventario.
- Disponibilidad de espacios para estacionar: En un mapa de estacionamientos, brinda confianza a los usuarios para que seleccionen un destino con espacio para ellos cuando lleguen.
- Restaurantes abiertos, cierran pronto y cerrados: en un mapa que muestre los resultados de la búsqueda de restaurantes, es importante que los usuarios sepan si un restaurante está cerrado cuando llegan.
La solución Dynamic Advanced Markers
Ahora, veamos cómo crear un mapa con los marcadores avanzados para visualizar datos dinámicos. Como se mencionó antes, el caso de uso es una cadena de tiendas minoristas que aprovechan su sistema de administración de la cola de retiro 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, buscamos 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 del marcador correspondientes para anotar visualmente el tiempo de espera en el marcador de mapa. La lista de atributos de marcadores está disponible de inmediato en la especificación de PinElement. También puedes usar código HTML personalizado para obtener opciones de personalización más completas.
En este ejemplo, usaremos dos atributos de marcadores para visualizar los datos del tiempo de espera:
- Color del marcador: azul para el tiempo de espera inferior a 5 minutos, amarillo durante más de 5 minutos
- Contenido del marcador (requiere marcadores HTML personalizados): Incluiremos el tiempo de espera actual en minutos en el propio marcador.
Paso 2: Configura la conexión con las fuentes de datos en tiempo real
Existen varias formas de conectarse a las fuentes de datos, y la solución adecuada depende del caso de uso y la infraestructura técnica. En este ejemplo, usamos un enfoque de extracción, en el que solicitamos los datos del tiempo de espera actualizados a través de solicitudes HTTP (REST) de forma regular. En las siguientes secciones, verás arquitecturas alternativas que aprovechan los enfoques push.
Para permitir que nuestra aplicación acceda a los datos del tiempo de espera desde 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 a través de una solicitud HTTP.
El siguiente paso es asegurarse de mantener los datos 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 active el temporizador, solicitaremos datos actualizados sobre el tiempo de espera, como se describió anteriormente. Una vez que obtengamos los datos nuevos, debemos actualizar el aspecto de los marcadores del mapa. En el siguiente paso, se detalla cómo realizar esos cambios.
Paso 3: Renderiza marcadores de mapa
Ahora podemos usar Marcadores avanzados para renderizar los marcadores estilizados en el mapa. Los marcadores avanzados se pueden renderizar en los mapas creados con la API de Maps JavaScript de Google Maps Platform. Cuando utilices marcadores avanzados, asegúrate de incluir el parámetro de ID de mapa en la solicitud de mapa JS.
En el fragmento de código que se muestra a continuación, creamos los marcadores y definimos su contenido creando 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 de los tiempos de espera actualizados y asigna estilos a cada pin de la tienda en función del 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";
El mapa ahora 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, revisaremos dos opciones alternativas: Firebase Cloud Messaging y Websockets. Independientemente del enfoque que selecciones, asegúrate de tener en cuenta los factores que se indican a continuación para que tu herramienta de mapa siga funcionando:
- Frecuencia de las actualizaciones
- Volumen de datos
- Número de marcadores en la vista de mapa
- Capacidades de hardware y navegador
Firebase Cloud Messaging
Firebase Cloud Messaging es un enfoque de envío. Con este enfoque, enviarás actualizaciones a la aplicación de mapas cada vez que se actualicen datos de 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.
Un aspecto que se debe considerar antes de seleccionar esta arquitectura es que requiere mantener una conexión de servidor persistente para cada navegador que ejecuta la aplicación de mapas. Por esa razón, puede ser más costoso de ejecutar y puede ser menos sólido en el contexto de problemas de conectividad.
WebSockets
Los WebSockets son otro enfoque basado en envíos para mantener los datos actualizados. 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 mapas. Los beneficios funcionales de este enfoque son similares en naturaleza a los de Firebase Cloud Messaging; sin embargo, puede 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 en función de los requisitos del mapa, el hardware y el navegador del usuario y el volumen de datos. Luego, los datos integrados se pueden utilizar para controlar el aspecto de los Marcadores avanzados en tiempo real, lo que brinda una experiencia dinámica a los usuarios.
Acciones siguientes
Lecturas adicionales:
- Marcadores avanzados - Google Developer Center
- Cómo crear marcadores con código HTML personalizado
- Cloud Functions para Firebase
- Firebase Cloud Messaging
Colaboradores
Autores principales:
Jim Leflar | Ingeniero de soluciones de Google Maps Platform
John Branigan, ingeniero sénior de Atención al Cliente de Google Cloud Platform
Steve Barrett | Ingeniero de soluciones de Google Maps Platform