Como Obter a Localização do Usuário com JavaScript

Aprenda como obter a localização do usuário com JavaScript! Com um código simples, você conseguirá obter a geolocalização com JavaScript.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Como Obter a Localização do Usuário com JavaScript

Na aula de hoje, quero te mostrar como obter a localização do usuário com JavaScript! Certamente, você já se deparou com aquelas mensagens em páginas da internet, perguntando se você deseja compartilhar sua localização, não é mesmo?

É exatamente isso que vamos construir hoje: um código simples, mas eficiente para obter a geolocalização com JavaScript.

A ideia é conseguir localizar o usuário usando JavaScript. Ressalto que isso só funcionará em páginas https, ou seja, em páginas seguras. Além disso, será necessário que o usuário autorize a coleta desses dados de localização.

Quer aprender como obter a localização do usuário em JavaScript? Então, vem comigo!

Funcionalidade de Geolocalização

Toda nossa implementação se baseará em uma funcionalidade nativa do navegador: a geolocalização.

Para acessar essa funcionalidade, é necessário criar um objeto Navigator, que contém um campo chamado geolocation. Esse campo, por sua vez, é um objeto que oferece diversas funcionalidades relacionadas à geolocalização.

Dentro dessas funcionalidades, destacamos a função getCurrentPosition, que possibilita a obtenção da posição atual do usuário.

navigator.geolocation.getCurrentPosition()

Ao utilizar essa função, é necessário passar duas outras funções como parâmetros: a successCallback, que trata o sucesso da obtenção da localização, e a errorCallback, que lida com possíveis erros.

Trabalhando com Callbacks – Sucesso e Erro

Como vimos, é necessário definir duas funções de Callback para lidar com o sucesso e o erro na obtenção da localização do usuário.

A função successCallback será executada quando a localização for obtida com êxito, enquanto a errorCallback entrará em ação quando não for possível obter a localização.

Começaremos criando a função para tratar o sucesso na obtenção da localização. Essa função sempre receberá um objeto contendo as informações de geolocalização do usuário, que é a resposta da função getCurrentPosition().

Vamos usar a informação desse objeto para exibir no console a localização obtida.

CodigoCopiar

function posicaoObtidaComSucesso(geolocalizacao){
    console.log(geolocalizacao);
}

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Quanto à função de erro, faremos algo semelhante. Esta função receberá um objeto de erro que descreverá o problema encontrado. Da mesma forma, vamos exibir essa informação no console.

function posicaoNaoPodeSerObtida(erro) {
    console.error(erro)
}

Ao invés de utilizar o console.log() para exibir o erro, usaremos o console.error(), pois essa função destaca o erro em vermelho.

Agora, podemos passar essas duas funções criadas como parâmetros para a função getCurrentPosition.

navigator.geolocation.getCurrentPosition(posicaoObtidaComSucesso, posicaoNaoPodeSerObtida);

Páginas Seguras – Comunicação HTTPS

Antes de testarmos nossa função de geolocalização, é crucial entender a importância da comunicação segura via HTTPS.

Páginas sérias e profissionais adotam uma comunicação segura (https) ao acessar e trocar informações com o usuário. A presença de “https” no início do endereço indica essa segurança.

Essa medida é essencial, pois as informações utilizadas e trocadas são criptografadas, garantindo a proteção dos dados. É fundamental utilizar uma página segura ao executar o código para obter a localização do usuário.

Caso a comunicação não seja segura o navegador não te permitirá obter as informações do usuário. Pois isso iria deixar as informações do usuário expostas.

Se você deseja implementar essa funcionalidade em seu próprio sistema para obter a localização do usuário com JavaScript, você precisa se certificar de utilizar a comunicação HTTPS, assim como o portal da Hashtag utiliza.

Obtendo a Localização do Usuário com JavaScript

Como o site da Hashtag está na pegada da comunicação segura, dá pra usar essa base pra testar nosso código e buscar a localização do usuário com JavaScript.

Para isso, na página da Hashtag, basta apertar o F12, abrir as ferramentas de desenvolvedor no navegador e ir na aba Console pra digitar nosso código.

Primeiro, adicionamos nossa função de Sucesso e pressionamos Enter.

Em seguida, fazemos o mesmo para a função de Erro.

Com as duas funções registradas, podemos criar nosso objeto navigator, como havíamos visto antes, para obter a localização do usuário.

Repare que, assim que você executar o código, o navegador abrirá uma caixa informando que a página atual deseja acessar sua localização e pergunta se você permite ou não esse acesso. Isso é fundamental; o usuário sempre precisará permitir o acesso à sua localização.

Caso você permita, dentro da ferramenta de desenvolvedor, poderá ver o objeto de geolocalização com as coordenadas da localização do usuário.

Caso o usuário recuse fornecer essas informações, cairemos na mensagem de erro.

Conclusão – Como Obter a Localização do Usuário com JavaScript

A geolocalização é um recurso crucial e amplamente utilizado em diversos sistemas, como e-commerces (Mercado Livre, Magazine Luiza, etc.) e aplicativos de entrega, como iFood, Rappi, entre outros.

Esses sistemas conseguem identificar a localização do usuário para proporcionar serviços personalizados com base nela, enviando mensagens contendo informações e ofertas relevantes aos usuários de acordo com sua localidade atual.

Com o código apresentado nessa aula, você aprendeu como obter a localização do usuário com JavaScript. Contudo, é importante ressaltar que isso só é possível em uma comunicação segura. Agora, você está pronto para implementar essa funcionalidade nos seus próprios projetos!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!