A Plataforma Google Maps permite que os clientes desenvolvam experiências exclusivas personalizando o design visual dos marcadores de mapa com os marcadores avançados. Neste documento, vamos analisar 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 atualização para o usuário.
Neste artigo, usamos um exemplo para fins ilustrativos: uma rede de varejo quer usar um mapa para mostrar os tempos de espera das lojas aos usuários. No entanto, a mesma arquitetura pode ser usada para muitos outros casos de uso. Veja mais algumas ideias:
- Disponibilidade de quarto de hotel: em um mapa que mostra os resultados da pesquisa de hotéis, a atualização da disponibilidade dos quartos é um indicador importante que pode incentivar os usuários a fazer uma reserva para um hotel à medida que o estoque diminui.
- Disponibilidade de vagas de estacionamento: em um mapa de estacionamentos, dê aos usuários confiança para selecionar um destino que tenha uma vaga para eles quando chegarem.
- Restaurantes abertos, fechado em breve e fechado: em um mapa que mostra os resultados da pesquisa por restaurantes, é importante que os usuários estejam cientes se um restaurante poderá estar fechado quando eles chegarem.
A solução de marcadores dinâmicos avançados
Agora, vamos analisar a criação de um mapa usando marcadores avançados para visualizar dados dinâmicos. Como mencionado antes, o caso de uso é uma rede de lojas que aproveita o sistema de gerenciamento de fila de finalização de compra para estimar e visualizar os tempos de espera dos usuários. Esta é a arquitetura do aplicativo:
Etapa 1: determinar atributos para definir a experiência visual
A primeira etapa é determinar uma ou mais propriedades de local que serão exibidas aos usuários. Nesse caso, queremos mostrar apenas uma propriedade: o tempo de espera atual em cada 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 do marcador está disponível imediatamente na especificação PinElement. Você também pode usar HTML personalizado para obter mais opções de personalização.
Neste exemplo, vamos usar dois atributos de marcador para visualizar os dados do tempo de espera:
- Cor do marcador: azul para o tempo de espera inferior a 5 minutos, amarelo para mais de 5 minutos
- Conteúdo do marcador (requer marcadores HTML personalizados): incluiremos 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, usamos uma abordagem de pull, em que solicitamos os dados atualizados do tempo de espera por solicitações HTTP (REST) regularmente. Nas seções a seguir, você vai conhecer arquiteturas alternativas que aproveitam as abordagens de push.
Para permitir que o aplicativo acesse os dados de tempo de espera do servidor, nossa arquitetura usa o 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, o que nos permite acessar a função do Cloud por meio de uma solicitação HTTP.
A próxima etapa é garantir que os dados estejam atualizados para o usuário. Para isso, configuramos um timer usando a função setInterval JavaScript com um tempo limite de 30 segundos. Sempre que o timer é acionado, solicitamos dados atualizados sobre o 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 mostra como fazer essas mudanças.
Etapa 3: renderizar marcadores de mapas
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 "ID do mapa" na solicitação de mapa JS.
No snippet de código mostrado abaixo, criamos os marcadores e definimos o conteúdo do marcador 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 dos tempos de espera e atribui um estilo a cada alfinete da loja com base nesse tempo:
// 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";
Agora o mapa usa nossa API de tempos de espera para mostrar os tempos de espera atualizados dos usuários:
Formas alternativas de se conectar a fontes de dados em tempo real
Há várias maneiras de se conectar a fontes de dados em tempo real. Analisamos duas opções alternativas, Firebase Cloud Messaging e Websockets. Seja qual for a abordagem escolhida, lembre-se de considerar os fatores abaixo para que a ferramenta de mapa permaneça eficiente:
- Frequência de atualizações
- Volume de dados
- Número de marcadores na visualização de 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 acionarão uma função de callback com a finalidade de atualizar a aparência e o conteúdo do marcador.
Algo a considerar antes de selecionar essa arquitetura é que ela exige a manutenção de uma conexão persistente com o servidor para cada navegador que executa o aplicativo de mapa. Por esse motivo, pode ser mais caro para executar e menos robusto no contexto de problemas de conectividade.
WebSockets
WebSockets é outra abordagem baseada em push para manter os dados atualizados. Semelhante ao cenário anterior, você pode usar WebSockets para estabelecer uma conexão persistente entre seu back-end e seu aplicativo de mapa. Os benefícios funcionais dessa abordagem são semelhantes por natureza ao Firebase Cloud Messaging, mas pode haver trabalho adicional necessário para configurar a infraestrutura necessária.
Conclusão
Os desenvolvedores podem combinar fontes de dados em tempo real com os 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, proporcionando uma experiência dinâmica para os usuários.
Próximas ações
Leitura adicional:
- Marcadores avançados: Centro para Desenvolvedores do Google
- Criar marcadores com HTML personalizado
- Cloud Functions para Firebase
- Firebase Cloud Messaging
Colaboradores
Autores principais:
Jim Leflar | Engenheiro de soluções da Plataforma Google Maps
John Branigan | Engenheiro de clientes sênior do Google Cloud Platform
Steve Barrett | Engenheiro de soluções da Plataforma Google Maps