Post-its dinâmicos dentro da API do Google Maps para React

Eu não tinha certeza do que fazer para o meu próximo projeto pessoal, mas sabia que queria integrar uma API robusta e cheia de recursos. Fui com o Google Maps.

Por ser tão amplamente utilizado, há uma grande quantidade de documentação e tutoriais, tanto do Google quanto de muitos programadores juniores e seniores que implementaram seus serviços.

Eu havia trabalhado com a API de dados do YouTube em um projeto anterior, então já tinha um console do desenvolvedor configurado e estava familiarizado com o registro e o processo para obter uma chave de API. Esses passos são bem simples, diga-se de passagem.

Com muito pouca codificação e algumas dicas úteis de alguns blogs, coloquei um mapa em um novo projeto React e comecei a experimentar alguns recursos. Não vou adicionar à infinidade de postagens que documentam o processo de configuração passo a passo - embora toque nele. Em vez disso, discutirei como expandi um recurso específico.

Este site é um ótimo recurso para projetos React no que diz respeito à configuração e implementação dos componentes do Maps. Depois de instalar @react-google-maps/api, tudo o que você precisa para adicionar um mapa básico são os componentes LoadScript e GoogleMap para carregar e exibir mapas, respectivamente.

É tão fácil quanto isto. Você pode ver que há apenas pequenas especificações adicionadas aqui para ajustar a aparência padrão.

Um recurso comum que muitos aplicativos baseados em mapas utilizam são os marcadores vermelhos distintos, que designam um ponto de interesse, geralmente o resultado de uma pesquisa ou entrada do usuário. Como a maioria dos recursos, os marcadores são um componente com muitos acessórios integrados que representam apenas uma pequena parte do ecossistema do Google Maps.

Muitas vezes, ao lado dos marcadores, estão as tags pop-out, conhecidas como InfoWindows, que exibem informações de texto quando o usuário clica ou rola sobre o marcador. Achei interessante tornar esses InfoWindows mais dinâmicos, permitindo a entrada e exclusão do usuário, cada um agindo como uma espécie de post-it para o marcador.

Aqui está a parte do mapa do meu BaseMapContainer:

Não vou entrar em tudo aqui, mas o código acima especifica a aparência padrão do meu mapa - tenho as coordenadas de Columbus Circle em Nova York como meu centro - e cria a funcionalidade para um usuário colocar marcadores e depois agir neles.

Se um usuário selecionar um determinado Marcador, a janela de informações incluirá meu componente NotesContainer, que é composto por um formulário de entrada, lista de notas e componente de notas para excluir e editar notas. Também passo a localização do marcador como um adereço, para que todas as informações essenciais sejam armazenadas em um só lugar.

Perdoe o estilo deselegante, mas aqui está o fácil recurso de nota post-it em ação.

Para quem está entrando no jogo da API ou procurando experimentar um sistema repleto de recursos, a API do Google Maps é um ótimo lugar para recorrer.