Com os dispositivos móveis tomando conta do mercado, se faz necessário para vários tipos de aplicações saberem qual a posição do usuário para fornecer informações mais personalizadas e relevante. Com o HTML5 foi introduzido a possibilidade de pegar a posição GPS do usuário que pode ser feito de maneira muito fácil.

function getLocation(){
             
    var saida = document.getElementById("saida");
    if( navigator.geolocation ){
        navigator.geolocation.getCurrentPosition(function(position){
            lat = position.coords.latitude;
            lng = position.coords.longitude;
            saida.innerHTML = "Latitude: "+lat+" - Longitude: "+lng;
        });
    }else{
        saida.innerHTML = "Geolocalização não é suportado por este navegador!";
    }
}

Veja exemplo simples de Geolocalização

Na linha 3 simplesmente pegamos um elemento HTML para realizar a saída para o usuário.

Na linha 4 realizamos um teste para saber se o navegador possui suporte ao recurso de geolocalização, senão mostramos a devida mensagem no else do teste.

Na linha 5 chamamos o método getCurrentPosition do objeto navigator.geolocation que recebe como parâmetro uma função que será chamada quando a posição de GPS for obtida sendo os dados passado em seu parâmetro position.

Nas linhas 6 e 7, pegamos os valores de latitude e longitude do objeto position que recebemos e na próxima linha exibimos este resultado para o usuário.

Agora vamos examinar os possíveis erros que podem ocorrer.

function getLocation(){
             
    var saida = document.getElementById("saida");
    if( navigator.geolocation ){
        navigator.geolocation.getCurrentPosition( showSucesso , showErro);
    }else{
        saida.innerHTML = "Geolocalização não é suportado por este navegador!";
    }
}
 
...
 
function showErro(erro){
    var saida = document.getElementById("saida");
     
    switch( erro.code ){
        case erro.PERMISSION_DENIED:
            saida.innerHTML = "O usuário negou o pedido de Geolocalização";
            break;
        case erro.POSITION_UNAVAILABLE:
            saida.innerHTML = "A posição não está disponível";
            break;
        case erro.TIMEOUT:
            saida.innerHTML = "O pedido para obter a localização do usuário expirou";
            break;
        case erro.UNKNOWN_ERROR:
            saida.innerHTML = "Um erro desconhecido ocorreu";
            break;
    }
}

Veja exemplo com tratamento de erros

Como vemos na linha 5, agora o método getCurrentPosition recebe duas funções como parâmetro, a primeira será executada se for possível obter uma posição e a segunda caso não seja, passando um objeto de erro para ela. Na linha 13 temos a nossa implementação do método de erro showErro que recebe o objeto erro, que entre seus atributos possui o código de erro, que podemos através de um switch na linha 16 comparar com as constantes PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT e UNKNOWN_ERROR que as suas descrição já se encontram no código.

Voltando um pouco para o objeto de position possui mais informações além de latitude e longitude conforme tabela abaixo:

Propriedade Retorno
coords.latitude A latitude como um número decimal
coords.longitude A longitude como um número decimal
coords.accuracy Retorna a precisão aproximada do ponto em metros.
coords.altitude Retorna a altitude em metros se disponível
coords.altitudeAccuracy Retorna a precisão aproximada da altura em metros
coords.heading Graus em sentido do norte verdadeiro
coords.speed Retorna a velocidade de deslocamento em metros se disponível
timestamp A data e hora da resposta
 
function showSucesso(position){
    var saida = document.getElementById("saida");
    saida.innerHTML += "<p>Latitude: "+position.coords.latitude+"</p>"
    saida.innerHTML += "<p>Longitude: "+position.coords.longitude+"</p>";
    saida.innerHTML += "<p>Accuracy: "+position.coords.accuracy+"</p>";
    saida.innerHTML += "<p>AltitudeAccuracy: "+position.coords.altitudeAccuracy+"</p>";
    saida.innerHTML += "<p>Heading: "+position.coords.heading+"</p>";
    saida.innerHTML += "<p>Speed: "+position.coords.speed+"</p>";
    saida.innerHTML += "<p>Timestamp: "+position.timestamp+"</p>";  
}

Veja exemplo

Algo que podemos fazer com as informações que obtemos é utilizar a API do Google Maps para gerar uma imagem estática por exemplo, marcando onde o usuário está.

function showSucesso(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var marker = "color:blue%7C"+latlon;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center="+latlon+"&markers="+marker+"&zoom=14&size=400x300&sensor=false";
 
    document.getElementById("saida").innerHTML = "<img src='"+img_url+"'>";
}

Exemplo com Mapa

O método não é muito diferente, neste caso é só construir uma URL para o serviço de Mapas estático http://maps.googleapis.com/maps/api/staticmap com os parâmetros:

  • maptype: tipo de mapa
  • center: posição em que o mapa irá ser ser centralizado
  • markers: marcadores que serão adicionados no mapa, formados por color:%7C<posição> zoom: nível de zoom, 1 para o minimo e entre 16 e 20 para máximo dependendo da região
  • size: tamanho da imagem a ser gerada

Para maiores detalhes de parâmetros consulte a documentação do Google maps .

OBSERVAÇÃO IMPORTANTE: Em navegadores desktop os métodos podem não funcionar gerando o o erro no console do “getCurrentPosition() and watchPosition() are deprecated on insecure origins.” pois atualmente é exigido que os métodos que forneçam informações sensíveis devem ser feitos por HTTPS. Mas testei no navegador mobile e os códigos funcionaram sem HTTPS.

Bom era isso T++