Como utilizar a API de sugestão de lugares do google com React e Typescript.

Como utilizar a API de sugestão de lugares do google com React e Typescript.

Motivação

Ontem estava quase finalizando um projeto pessoal meu que consiste em consumir uma API de tempo meteorológico e mostrar os dados como temperatura, imagem que remeta ao tempo, pressão do ar, visibilidade e etc. O projeto final pode ser encontrado aqui no meu Github. Não sei vocês, mas quando pesquiso alguma localização em qualquer aplicação o mínimo que eu espero é que sejam sugeridos lugares ao mesmo tempo que digito, que é algo que facilita muito. Com isso procurei como implementar a API de lugares do google no meu projeto (que faz exatamente isso) e cheguei nesse pacote e como não encontrei modos de utiliza-lo além da própria documentação no npm, resolvi escrever esse post como algo complementar.

Criando uma conta no google cloud e ativando a api

Antes de mais nada, você precisará de uma conta no google e de acesso a API de places. Vá ate o site do google cloud faça login e os primeiros passos(a parte de adicionar um cartão é OBRIGATÓRIA, você terá um saldo de 300 dólares para poder usar o que dá e sobre). Após fazer o login e os primeiros passos, você será redirecionado para o console de sua conta. Já no console da sua conta, provavelmente terá um projeto inicial, se não tiver, crie um clicando do lado do logo da cloud na barra de navegação.

Após a criação do seu projeto, clique em API's na tela inicial (vai ser algo como essa imagem abaixo)

api_dash.png

Clique em "biblioteca" na sidebar esquerda. Pesquise por "Places API" e "Maps Javascript API", ative as duas. Após ativar as duas API's, em "credencias" na mesma sidebar e crie uma credencial. Pronto, você já tem as API's que precisamos ativadas e uma credencial para fazer a consulta. Agora vamos para o código.

Adicionando o script do google no nosso HTML

Após a criação da sua key e ativação das API's, vamos ao código. Antes de tudo, no seu index.html (se tiver utilizando React), insira a seguinte linha de código no final do body: <script src="https://maps.googleapis.com/maps/api/js?key=SUA-KEY-AQUI&libraries=places"></script>, mas claro substituindo "SUA-KEY-AQUI" para a credencial que criamos na sessão anterior. Após isso, estamos prontos para usar o pacote.

Utilizando o pacote use-places-autocomplete

Para usarmos o pacote, primeiro vamos instalar com yarn add use-places-autocomplete, e se tiver usando Typescript adicione yarn add -D @types/googlemaps. Com isso, já temos acesso ao nosso hook. Para importa-lo adicione import usePlacesAutocomplete from 'use-places-autocomplete'; no topo de seu projeto.

Agora vamos chamar o hook para usar suas funções, para chamar faça igual a imagem abaixo

hook.png

Onde temos:

  • ready: define se está pronta para ser chamada;
  • status: o status da chamada que fizemos;
  • value: o valor do input que estamos digitando ;
  • data: as sugestões dos lugares;
  • clearSuggestions: limpar as sugestões;
  • setValue: para mudar o valor do input;

Agora vamos para configuração das tags

Configurando o input e criando função handleInput

Para configurar o input, coloque as propriedades como está na imagem abaixo:

input.png

E para função de handleInput:

handleInput.png

Já temos nosso input e a função handleInput configurada, vamos para renderizar as sugestões.

Renderizando as sugestões

Para renderizar as sugestões, precisamos usar o status que resgatamos do nosso hook. Fazemos desse jeito:

render.png

Aqui estamos verificando a o valor de status, se for 'OK' chamamos a função renderSuggestions. S.PlacesList é um componente que eu criei usando styled components, é uma ul com algumas estilizações.

Agora vamos para a função renderSuggestions que é definida assim:

rederSU.png

Nessa função, fazemos uma map na data que é o que a API do google envia para gente e fazemos um 'destructuring', pegando as propriedades places_id(para ser usada como key do componente) e main_text e secondary_text que é realmente o texto dos lugares sugeridos.

Com essas informações em mãos, retornamos um S.PlaceItem (que é uma li criada com styled components) com uma key (o nosso place_id) e o texto primário e secundário das nossas sugestões. E como você percebeu, adicionamos uma função handleSelect na propriedade onClick que é usada para resgatar o valor do lugar que clicamos.

Selecionando um lugar das nossas sugestões

Agora so falta função de handleSelect que é uma implementação bem simples como vocês podem ver abaixo:

handle-seelect.png

onde apenas pegamos o valor que é mandado e o atribuimos ao value, logo depois usamos a função clearSuggestions que resgatamos do nosso hook. Pronto, tudo funcionando já!

Resgatando latitude e longitude

Somente o nome do lugar pode não ser muito útil, mas podemos tambem resgatar a latitude e longitude do lugar que selecionamos. Para isso, adicione getGeocode e getLatLng as importações do use-places-autocomplete (entre chaves). Com essas funções podemos resgatar a latitude e longitude adicionando esse seguinte trecho de código a nossa função handleSelect:

getLatLang.png

onde usamos o valor que recebemos na handleSelect ao chamar a função getGeoCode e o resultado dessa função usamos como parâmetro para chamar getLatLng e quando fazemos o destructuring, conseguimos o valor de lat de lng. Pronto, já temos uma informação a mais.

Finalização

Espero que esse pequeno tutorial tenha ajudado alguém, sendo na parte de acesso a API do google ou na utilização do pacote. Para mais informações você pode acessar a documentação do pacote.