Google Maps Platform permite que los clientes desarrollen 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 cartográficas 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 el desarrollador puede querer que se actualice la visualización del mapa para mantener la sensación de actualización para el usuario.
En este artículo, usamos un ejemplo a modo de ilustración: una cadena de venta minorista quiere usar un mapa para mostrarles a los usuarios los tiempos de espera de las tiendas. Sin embargo, esta misma arquitectura se podría usar para muchos otros casos de uso. Estas son algunas ideas adicionales:
- Disponibilidad de habitaciones de hotel: En un mapa que muestra los resultados de la búsqueda de hoteles, la actualización de la disponibilidad de las habitaciones es un indicador importante que puede alentar a los usuarios a reservar un hotel a medida que disminuye el inventario.
- Disponibilidad de espacios de estacionamiento: En un mapa de estacionamientos, permite que los usuarios seleccionen un destino que tenga un espacio disponible 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
Ahora, veamos cómo 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 confirmación de la compra 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 mostrarles 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 marcadores está disponible de forma predeterminada en la especificación PinElement. También puedes usar HTML personalizado para obtener más opciones de personalización enriquecidas.
En este ejemplo, usaremos dos atributos de marcador para visualizar los datos de tiempo de espera:
- Color del marcador: azul para un tiempo de espera inferior a 5 minutos y amarillo para un tiempo 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 las fuentes de datos en tiempo real
Hay varias formas de conectarse a las fuentes de datos, y la solución adecuada depende del caso de uso y de la infraestructura técnica. En este ejemplo, usamos un enfoque de extracción, en el que solicitamos los datos de tiempo de espera actualizados a través de solicitudes HTTP (REST) de forma periódica. 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 calcularlos. 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 garantizar que los datos estén 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 de tiempo de espera actualizados como se describió anteriormente. Una vez que obtengamos los nuevos datos, debemos actualizar el aspecto de los marcadores del mapa. En el siguiente paso, se detalla 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 los mapas creados con la API de Maps JavaScript de Google Maps Platform. Cuando uses marcadores avanzados, asegúrate de incluir el parámetro ID de mapa en la solicitud de mapa de JS.
En el fragmento de código que se muestra a continuación, creamos los marcadores y definimos su contenido 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 último paso es actualizar el texto del marcador y el diseño CSS de cada tienda. El siguiente código lee los datos de tiempos de espera actualizados y asigna un estilo 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, revisamos dos opciones alternativas: Firebase Cloud Messaging y WebSockets. Sin importar el enfoque que selecciones, asegúrate de considerar los siguientes factores para que tu herramienta de mapas siga funcionando de manera eficiente:
- Frecuencia de las actualizaciones
- Volumen de datos
- Cantidad de marcadores en la vista de mapa
- Funciones del hardware y el navegador
Firebase Cloud Messaging
Firebase Cloud Messaging es un enfoque push. Con este enfoque, enviarás actualizaciones a la aplicación de mapas 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.
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 ejecute la aplicación de mapas. Por esa razón, puede ser más costoso de ejecutar y menos sólido en el contexto de los problemas de conectividad.
WebSockets
Los WebSockets son otro enfoque basado en el envío de datos 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 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. Los datos integrados se pueden usar para controlar el aspecto de los marcadores avanzados en tiempo real, lo que permite una experiencia dinámica para 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