Uma das coisas mais sensacionais que o HTML5 tem é a API Geolocation, através dela podemos obter a localização do usuário, caso ele esteja usando um dispositivo equipado com GPS o resultado será mais satisfatório.

Devemos ter cuidado ao trabalhar com a API Geolocation, pois a localização só estará disponível se o browser der suporte e se o usuário concordar e se não tiver alguma outra restrição (o Chrome a partir da versão 50 só aceita requisições via https) .

Gettando a latitude e longitude

    var box = document.getElementById("box");

    function getGeoLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(function(position){
                box.innerHTML = "Latitude: " + position.coords.latitude + "</br>" +
                                "Longitude: " + position.coords.longitude;               
            });
        } else { 
            box.innerHTML = "Infelizmente este browser não oferece suporte para Geolocation. Vá comprar outro Iphone e dar mais dinheiro para éPOU!";
        }
    }

Explicando

Exemplo online

Tratamento de erros

É indispensável tratar os possíveis erros. Mas é fácim!

        var box = document.getElementById("box");

        function getGeoLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(exibirPosition, tratarErros);
            } else {
                box.innerHTML = "Infelizmente este browser não oferece suporte para Geolocation.";
            }
        }

        function exibirPosition(position) {
            box.innerHTML = "Latitude: " + position.coords.latitude + "</br>" +
                            "Longitude: " + position.coords.longitude;   
        }

        function tratarErros(error) {
            switch (error.code) {                
                case error.PERMISSION_DENIED:
                    box.innerHTML = "Usuário FDP negou a nosso pedido de localização."
                    break;
                case error.POSITION_UNAVAILABLE:
                    box.innerHTML = "A localização não está disponível."
                    break;
                case error.TIMEOUT:
                    box.innerHTML = "O pedido de localização deu timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    box.innerHTML = "Um erro ̶a̶l̶i̶e̶n̶í̶g̶e̶n̶a̶  desconhecido, aconteceu."
                    break;
            }
        }   

Explicando

Exemplo online

Mostrando a localização em um map

Podemos conferir a posição informada pelo browser interagindo com um mapa do Google Maps. Fique a vontade para usar outro serviço.

function exibirPosition(position) {                    
    var latitudeAndLongitude = position.coords.latitude + "," + position.coords.longitude;
    var urlImg = "https://maps.googleapis.com/maps/api/staticmap?center="+latitudeAndLongitude+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("box").innerHTML = "<img src='"+urlImg+"'/>";                    
}

Exemplo online

Em outro post falamos mais sobre algumas particularidades da geolocation e outros recursos.

Até a próxima!