google-maps-api-parte-6-pegando-local-do-usuario-com-html5-geolocation

No #1postperday de hoje veremos como utilizar o GeolocationSservice para pegar a localização do usuário de forma automágica.

Todas as partes da série Google Maps API:

Pegando a Localização do Usuário com HTML5 GeoLocation:

GeoLocation é uma das mais divertidas funções do HTML5. E é super fácil de usar.

Inicie o workflow rodando gulp com o terminal na pasta do projeto, e vamos editar o arquivo src/js/maps.js.

Insira ao final do arquivo:

maps.js (insira ao final do arquivo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function localizarUsuario(){
  if (window.navigator && window.navigator.geolocation) {
   var geolocation = window.navigator.geolocation;
   geolocation.getCurrentPosition(sucesso, erro);
  } else {
     alert('Geolocalização não suportada em seu navegador.')
  }
  function sucesso(posicao){
    console.log(posicao);
    var latitude = posicao.coords.latitude;
    var longitude = posicao.coords.longitude;
    alert('Sua latitude estimada é: ' + latitude + ' e longitude: ' + longitude )
  }
  function erro(error){
    console.log(error)
  }
}

A função em sí consiste em 2 partes: primeiro um IF que verifica se o navegador suporta Geolocation (e mostra um erro se não suportar), e 2 funções: sucesso e erro.

A função que faz a ´mágica’ é geolocation.getCurrentPosition(), e as funções sucesso() e erro() são parâmetros dela. A primeira é chamada se der tudo certo, a segunda caso haja um erro.

O parâmetro da função sucesso é a posição estimada. Um objeto que contém informações como altitude, latitude, longitude e velocidade.

Chamando a função localizarUsuario()

Vamos inserir mais um botão em nosso HTML para que o usuário possa escolher quando ativar o Geolocation.

Insira o seguinte código após o <body>:

index.html (insira após abertura da tag BODY)
1
2
3
(...)
<button onClick="localizarUsuario()">Minha Localização</button> <br>
(...)

Agora abra seu navegador (que já deve estar com a página e o liveReload iniciado) ou rode gulp, novamente, no console.

Usuário em movimento

Caso o usuário esteja em movimento, você pode monitorar sua localização. Não usaremos isso neste artigo, mas é uma boa você saber, basta usar, por exemplo

EXEMPLO
1
2
3
4
5
6
var movimento = window.navigator.geolocation.watchPosition(function(posicao) {
   console.log(posicao);
 });

 //para parar de monitorar:
 window.navigator.geolocation.clearWatch(movimento);

Conclusão

O #1postperday de hoje foi também uma #rapidinha.

A dica de Geolocation é rápída, simples e eficaz - além de muito útil.

Com ela e o que veremos no próximo artigo (traçar rotas) fica muito fácil de criar aplicações maneiras estilo GPS.

Fique ligado para o próximo artigo!