API de geolocalização

Índice

    Mostrar índice

Localize a posição do usuário

A API HTML Geolocation é usada para obter a posição geográfica de um usuário.

Como isso pode comprometer a privacidade, a posição não estará disponível a menos que o usuário aprove.

Observação

A geolocalização é mais precisa para dispositivos com GPS, como smartphones.

Suporte ao navegador

A API de geolocalização é compatível com todos os navegadores:

Yes Yes Yes Yes Yes

Observação

A API de geolocalização só funcionará em contextos seguros, como como HTTPS.

Se o seu site estiver hospedado em uma origem não segura (como HTTP), o solicitações para obter a localização dos usuários não funcionarão mais.

Usando a API de geolocalização

O método getCurrentPosition() é usado para retornar a posição do usuário.

O exemplo abaixo retorna a latitude e longitude da posição do usuário:

Exemplo

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

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

</body>
</html>

Exemplo explicado:

  • Verifique se a geolocalização é suportada

  • Se houver suporte, execute o método getCurrentPosition(). Caso contrário, exiba uma mensagem ao usuário

  • Se o método getCurrentPosition() for bem-sucedido, ele retornará um objeto de coordenadas para a função especificada no parâmetro (showPosition)

  • A função showPosition() gera a latitude e a longitude

O exemplo acima é um script de geolocalização muito básico, sem tratamento de erros.

Lidando com Erros e Rejeições

O segundo parâmetro do método getCurrentPosition() é usado para tratar erros. Ele especifica uma função a ser executada se não conseguir obter a localização do usuário:

Exemplo

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
    case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
    }
 }

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

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

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Exibindo o resultado em um mapa

Para exibir o resultado em um mapa, você precisa acessar um serviço de mapas, como o Google Mapas.

No exemplo abaixo, a latitude e a longitude retornadas são usadas para mostrar o local em um Google Mapa (usando uma imagem estática):

Exemplo

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

   let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
   "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

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

Tente você mesmo

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Como mostrar um mapa do Google interativo com opções de marcador, zoom e arrastar.

Script do Google Map

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  const latlon = new google.maps.LatLng(lat, lon)
  const mapholder = document.getElementById('mapholder')
  mapholder.style.height = '250px';
  mapholder.style.width = '500px';

  var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  }
    
  const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
  const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

Informações específicas do local

Esta página demonstrou como mostrar a posição de um usuário em um mapa.

A geolocalização também é muito útil para informações específicas de localização, como:

  • Informações locais atualizadas

  • Mostrando pontos de interesse próximos ao usuário

  • Navegação passo a passo (GPS)

O método getCurrentPosition() - Dados de retorno

O método getCurrentPosition() retorna um objeto em caso de sucesso. A latitude, propriedades de longitude e precisão são sempre retornadas. As outras propriedades são retornadas se disponível:

coords.latitude

A latitude como um número decimal (sempre retornado)

coords.longitude

A longitude como um número decimal (sempre retornado)

coords.accuracy

A precisão da posição (sempre retornada)

coords.altitude

A altitude em metros acima do nível médio do mar (devolvida se disponível)

coords.altitudeAccuracy

A precisão da altitude da posição (retornada se disponível)

coords.heading

O rumo em graus no sentido horário a partir do Norte (retornado se disponível)

coords.speed

A velocidade em metros por segundo (retornada se disponível)

timestamp

A data/hora da resposta (retornada se disponível)

Objeto de geolocalização - outros métodos interessantes

O objeto Geolocalização também possui outros métodos interessantes:

  • watchPosition() - Retorna a posição atual do usuário e continua a retornar a posição atualizada conforme o usuário se move (como o GPS de um carro).

  • clearWatch() - Interrompe o método watchPosition().

O exemplo abaixo mostra o método watchPosition(). Você precisa de um dispositivo GPS preciso para testar isso (como Smartphone):

Exemplo

<script>
const x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
 function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
 }
</script>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>