A Plataforma Google Maps permite que os clientes desenvolvam experiências únicas personalizando o design visual dos marcadores de mapa usando Marcadores Avançados. Neste documento, vamos mostrar como os clientes podem ir além e criar marcadores que mudam dinamicamente com base em dados em tempo real.
Os marcadores de mapa são uma ferramenta útil para oferecer experiências de mapeamento avançadas aos usuários. Os atributos do marcador, como tamanho, cor e forma, podem transmitir informações adicionais sobre cada local marcado. Em alguns casos, essas informações adicionais podem mudar dinamicamente, e o desenvolvedor pode querer que a visualização do mapa seja atualizada, mantendo uma sensação de novidade para o usuário.
Neste documento, usamos um exemplo para fins ilustrativos: uma rede de varejo quer usar um mapa para disponibilizar os tempos de espera da loja aos usuários. No entanto, essa mesma arquitetura pode ser usada para muitos outros casos de uso. Confira algumas ideias adicionais:
- Disponibilidade de quartos de hotel: em um mapa que mostra os resultados da pesquisa de hotéis, a disponibilidade de quartos é um indicador importante que pode incentivar os usuários a fazer uma reserva à medida que o inventário diminui.
- Disponibilidade de vagas de estacionamento: em um mapa de estacionamentos, ofereça aos usuários a confiança de selecionar um destino que terá uma vaga para eles quando eles chegarem.
- Restaurantes abertos, fechando em breve e fechados: em um mapa que mostra os resultados da pesquisa de restaurantes , é importante que os usuários saibam se um restaurante pode estar fechado quando chegarem.
A solução de Marcadores Avançados Dinâmicos
É possível criar um mapa usando marcadores avançados para visualizar dados dinâmicos. Como mencionado anteriormente, o caso de uso é uma rede de lojas de varejo que aproveita o sistema de gerenciamento de filas de check-out para estimar e visualizar os tempos de espera dos usuários. Esta é a arquitetura do aplicativo:
Etapa 1: determinar os atributos para definir a experiência visual
A primeira etapa é determinar uma ou mais propriedades de local para mostrar aos usuários. Nesse caso, queremos mostrar apenas uma propriedade: o tempo de espera atual em cada localização da loja, medido em minutos.
A próxima etapa é selecionar um ou mais atributos de marcador correspondentes para anotar visualmente o tempo de espera no marcador do mapa. A lista de atributos de marcador está disponível pronta para uso na PinElement. Também é possível usar HTML personalizado para mais opções de personalização avançada.
Para este exemplo, vamos usar dois atributos de marcador para visualizar os dados de tempo de espera:
- Cor do marcador: azul para tempo de espera menor que 5 minutos, amarelo para mais de 5 minutos
- Conteúdo do marcador (requer marcadores HTML personalizados): vamos incluir o tempo de espera atual em minutos no próprio marcador
Etapa 2: configurar a conexão com fontes de dados em tempo real
Há várias maneiras de se conectar a fontes de dados, e a solução certa depende do seu caso de uso e da infraestrutura técnica. Neste exemplo, estamos usando uma abordagem de extração, em que solicitamos os dados atualizados do tempo de espera usando solicitações HTTP (REST) regularmente. Nas seções a seguir, você verá arquiteturas alternativas que aproveitam abordagens de push.
Para permitir que nosso aplicativo acesse os dados de tempo de espera do nosso servidor, nossa arquitetura aproveita Cloud Functions para Firebase. O Cloud Functions permite definir uma função de back-end para acessar e calcular esses dados. Também incluímos a biblioteca do Firebase no nosso aplicativo da Web, permitindo que acessemos nossa Função do Cloud usando uma solicitação HTTP.
A próxima etapa é garantir que os dados sejam mantidos atualizados para o usuário. Para fazer isso, configuramos um timer usando a função setInterval do JavaScript com um tempo limite de 30 segundos. Cada vez que o timer é acionado, solicitamos dados atualizados do tempo de espera, conforme descrito acima. Depois de receber os novos dados, precisamos atualizar a aparência dos marcadores do mapa. A próxima etapa detalha como fazer essas mudanças.
Etapa 3: renderizar marcadores de mapa
Agora podemos usar os Marcadores Avançados para renderizar os marcadores estilizados no mapa. Os marcadores avançados podem ser renderizados em mapas criados pela API Maps JavaScript da Plataforma Google Maps. Ao usar marcadores avançados, inclua o parâmetro de ID do mapa na solicitação do mapa JS.
No snippet de código mostrado abaixo, criamos os marcadores e definimos o conteúdo deles criando um 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]
}));
A etapa final é atualizar o texto do marcador e o estilo CSS de cada loja. O código abaixo lê os dados atualizados do Tempo de espera e atribui o estilo a cada alfinete de loja com base no tempo 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";
O mapa agora usa nossa API de tempos de espera para visualizar os tempos de espera atualizados para os usuários:
Outras maneiras de se conectar a fontes de dados em tempo real
Há várias maneiras de se conectar a fontes de dados em tempo real. Abaixo, analisamos duas opções alternativas: o Firebase Cloud Messaging e os WebSockets. Seja qual for a abordagem selecionada, considere os fatores abaixo para que a ferramenta de mapa continue funcionando bem:
- Frequência de atualizações
- Volume de dados
- Número de marcadores na visualização do mapa
- Recursos de hardware e navegador
Firebase Cloud Messaging
O Firebase Cloud Messaging é uma abordagem de push. Usando essa abordagem, você enviará atualizações para o aplicativo de mapa sempre que os dados de tempo de espera forem atualizados no back-end. As mensagens de atualização vão acionar uma função de callback cujo objetivo é atualizar a aparência e o conteúdo do marcador.
Uma coisa a considerar antes de selecionar essa arquitetura é que ela exige a manutenção de uma conexão de servidor persistente para cada navegador que executa o aplicativo de mapa. Por esse motivo, pode ser mais caro executar e menos robusto no contexto de problemas de conectividade.
WebSockets
WebSockets são outra abordagem baseada em push para manter os dados atualizados. Semelhante ao cenário anterior, é possível usar WebSockets para estabelecer uma conexão persistente entre o back-end e o aplicativo de mapa. Os benefícios funcionais dessa abordagem são semelhantes ao Firebase Cloud Messaging, mas pode ser necessário mais trabalho para configurar a infraestrutura necessária.
Conclusão
Os desenvolvedores podem combinar fontes de dados em tempo real com Marcadores Avançados para criar visualizações intuitivas no Google Maps. Há várias maneiras de conectar essas fontes de dados, dependendo dos requisitos do mapa, do hardware e do navegador do usuário e do volume de dados. Os dados integrados podem ser usados para controlar a aparência dos Marcadores Avançados em tempo real, permitindo uma experiência dinâmica para os usuários.
Próximas ações
Leia mais:
- Marcadores Avançados – Centro para Desenvolvedores do Google
- Criar marcadores com HTML personalizado
- Cloud Functions para Firebase
- Firebase Cloud Messaging
Colaboradores
Principais autores:
Jim Leflar | Engenheiro de soluções da Plataforma Google Maps
John Branigan | Google Cloud Engenheiro de clientes sênior da Plataforma
Steve Barrett | Engenheiro de soluções da Plataforma Google Maps