Como obter a localização do usuário com HTML5

Com o aumento dos aparelhos smartphones, muitas aplicações para se tornarem mais úteis, precisam obter a localização do seu usuário. Exemplos não faltam no mercado: GPS, sistemas de entrega de comida, remédios, segurança e muitos outros tipos de sistema.

No entanto, como fazer para obter a localização do usuário? Existem algumas formas. Neste artigo, vou explicar com você pode obter a localização através do HTML5.

Lembrando que, por questões de privacidade, a localização do usuário só será disponível caso o usuário aprove pela interface do navegador.

Aviso importante: O Google tem feito iniciativas para promover o uso do protocolo SSL.

Isso além de prover uma melhor colocação em resultados em seu sistema de busca, também traz mais segurança. E não obstante, o navegador Chrome, além de avisar ao usuários que não estão em uma navegação segura, ele também impede que este recurso do HTML5 funcione corretamente. Por isso, para que o código abaixo funcione, você precisará rodar sobre o protocolo HTTPS.

Usando Geolocalização com HTML5

O método getCurrentPosition() pode ser usado para obter a localização do usuário. Veja o exemplo abaixo, onde no método, é retornado os valores de longitude e latitude referentes a localização do usuário.

<script>
// obtem um elemento HTML pelo ID.
var x = document.getElementById("objeto");

// Funlçao responsável por obter a localização
function obterLocalizacao() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(exibirPosicao);
    } else {
        x.innerHTML = "Não foi possível realizar este procedimento. A versão atual do navegador impediu o funcionamento.";
    }
}

// exibe a localização do usuário
function exibirPosicao(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

O exemplo acima irá exibir apenas a longitude e a latitude da posição geográfica do usuário.

Como exibir a localização do usuário em um Mapa

Para exibir os resultados em uma mapa, escolhi o serviço de mapa do Google. No entanto, você pode usar qual serviço de mapa quiser.

No caso do Google, você precisará de uma chave. Esta chave pode ser obtida gratuitamente.
Veja o exemplo abaixo.

 

// Função simples para exibir as coordenadas do usuário em um mapa do Google.
function exibirPosicaoMapa(position) {
    var latitudeLongiditudeFormatado = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
    "+latitudeLongitudeFormatado+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

    document.getElementById("painelDoMapa").innerHTML = "<img src='"+img_url+"'>";
}

O código acima irá apenas gerar uma imagem com a posição informada na variável latitudeLongiditudeFormatado.

Caso tenha alguma dúvida, deixe um comentário abaixo. Farei o possível para te ajudar.

Vote

Deixe um comentário