Blog do MX Cursos

Aprenda a utilizar o API de geolocalização com HTML5

Aprenda a utilizar o API de geolocalização com HTML5

A partir do HTML5 foi introduzida a API de Geolocalização, possibilitando retornar suas coordenadas, como latitude e longitude.

Sendo assim, imagine a possibilidade de informar a distância do cliente até a loja? Ou informar sua posição para ele conseguir se localizar?

Você pode pensar que isso é possível apenas em aplicativos para smartphones. Porém e se você conseguisse fazer isso em seu site?

Primeiro você precisa entender que a geolocalização é capacidade de informar suas coordenadas e pode conseguir recuperar essas informações através do IP, GPS, Conexão de Wifi, etc.

Mas qualquer um pode pegar minhas coordenadas? Como isso envolve a privacidade do usuário, será sempre solicitado a permissão para que o usuário possa utilizar a API de Geolocalização.

autorização para geolocalização

Certamente você consegue pegar esses dados via JavaScript, e com eles, exibir a posição do usuário, distâncias e até endereço, através de serviços externos.

Antes de utilizar, você precisa verificar se o recurso de geolocalização do navegador do usuário está disponível, para isso você pode testar:

Consequentemente, para retornar a posição atual do usuário, pode utilizar o método getCurrentPosition:

Ele receberá 3 parâmetros: um callback quando retornar corretamente, um callback se ocorrer erro, e um objeto PositionOptions, que terão as seguintes opções:

  • o enableHighAccuracy (indica se deseja receber os resultados mais precisos, podem ter respostas mais lentes, ele recebe um valor booleano;
  • o timeout (tempo que o dispositivo demora para retornar uma posição, recebe um valor em milissegundos);
  • o maximumAge (a possível posição de um cache ou posição atual, recebe o valor máximo em milissegundos).

Se você precisa da posição enquanto tiver alteração, como movimentação do disponível, você pode utilizar o método watchPosition

Outra coisa importane, é que os parâmetros são os mesmos do getCurrentPosition. Só que método watchPosition, retorna um id, caso precise cancelar o monitoramento, para isso basta passar o id pra o método clearWatch.

Prática – Geolocalização

Primeiramente vamos criar uma página, onde será solicitado a utilização da API Geolocation, e com esses dados, mostrar no mapa, usando o Google Maps, a posição dele.

Então criaremos o arquivo index.html

  • Na linha 9 definimos o CSS, onde vamos deixar que paga ocupe 100% de altura. Por isso é definido também para o html e o body, além da div#map, onde será exibido o mapa;
  • Depois disso, na linha 11  incluímos o script da API do Google Maps;
  • Já na linha 12 incluímos o script map.js, que irá ser responsável por recuperar os dados da API Geolocation.
  • Na linha 16 é definido a div#map onde será exibido o mapa.

Agora criaremos o script para resgatar as informações da localização e exibir no mapa.

Para uma melhor compreensão, será adicionado cada parte e será explicado, no final terá o arquivo completo:

  • Na linha 1 adicione o evento DOMContentLoaded, que irá executar o código só após carregar o DOM da página;

  • Na linha 3, criamos uma variável target, que recebe querySelector retornando div#map

  • Na linha 5 use o geolocation, com o método getCurrentPosition, que recebe uma função anonima com parâmetro position, que irá retornar os dados da posição do usuário.

  • Já na linha 7 crie a variável latitude, que vai receber a latitude retornado do parâmetro position do callback;
  • E na linha 8 crie a variável longitude, que vai  receber a longitude retornado do parâmetro position do callback;
  • Na linha 9 crie a variável coordinate, que vai receber a instancia da classe google.maps.LatLng, que passamos a latitude e longitude para o construtor.

  • Agora, na linha 11 crie uma variável optionsMap, que recebe um objeto;
  • Na linha 12 defina o atributo center com a instancia da classe google.maps.LatLng;
  • Depois, na linha 13 defina o zoom com valor 19;
  • Na linha 14 defina o mapTypeId, com google.maps.MapTypeId.ROADMAP que é o tipo do mapa;
  • Na linha 17 crie uma variável map que recebe a instancia da classe google.maps.Map, que recebe onde será exibido o mapa, e as opções de configuração do mapa. Lembrando que as propriedades center e zoom, são obrigatórias.

    • Na linha 19 crie uma variável configMarker que recebe um objeto para adicionar uma marcação de posição no mapa;
    • Na linha 20 defina a propriedade position, que receber as coordenadas, que é a instancia da classe google.maps.LatLng;
    • Na linha 21 defina a propriedade map, que recebe a instancia da classe google.maps.Map;
    • Na linha 22 defina a propriedade title que recebe o valor “Você está aqui!”;
    • Na linha 25 crie uma variável marker que recebe a instancia da classe google.maps.Marker, que recebe o objeto configMarker com as configurações.

Veja o exemplo nessa página:

https://blog.mxcursos.com/exemplos/geolocalizacao/

Observações

É necessário você executar num servidor http. Localmente você conseguirá testar, na sua hospedagem a conexão precisa estar em https.

Caso não apareça o mapa quando criar, precisará habilitar o aplicativo no google, gerar uma chave e adicionar com parâmetro key

Para conseguir ter acesso a essa chave, você pode seguir a documentação :

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=pt-br

 Concluindo

Com API Geolocation você tem um mundo de possibilidades, claro que você poderá ter que contratar serviços ou utilizar serviços gratuitos, como para conseguir o endereço usar o serviço openstreetmap, ou calcular distância entre dois pontos e usar o serviço do Google como  Distance Matrix do Google para mapear essa distância.

Experimente, teste, utilize, e sempre busque dá uma melhor experiência para seus usuários. Espero que tenham gostado e até a próxima.

 

David CHC

David CHC

Trabalha com programação há mais de 10 anos e atualmente é líder técnico do MX Cursos, empresa onde atua desde 2010.

3 Compart.
Compartilhar3
Twittar
+1
Compartilhar