A partir do HTML5 foi introduzida a API de Geolocalização, possibilitando retornar suas coordenadas, como latitude e longitude.
Imagine a possibilidade de informar a distância do cliente até a loja? Ou informar sua posição para ele conseguir se localizar?
Você pode pensar que isso é possível apenas em aplicativos para smartphones. Porém e se você conseguisse fazer isso em seu site?
A Geolocalização é capacidade de informar suas coordenadas e pode conseguir recuperar essas informações através do IP, GPS, Conexão de Wifi, etc.
Mas qualquer um pode pegar minhas coordenadas? Como isso envolve a privacidade do usuário, será sempre solicitado a permissão para que o usuário possa utilizar a API de Geolocalização.
Você consegue pegar esses dados via JavaScript, e com eles, exibir a posição do usuário, distâncias e até endereço, através de serviços externos.
Antes de utilizar, você precisa verificar se o recurso de geolocalização do navegador do usuário está disponível, para isso você pode testar:
if( !('geolocation' in navigator) ) {
alert("Navegador não tem suporte API Geolocation");
}Para retornar a posição atual do usuário, pode utilizar o método getCurrentPosition:
navegator.geolocation.getCurrentPosition(success, error, PositionOptions);
Ele receberá 3 parâmetros: um callback quando retornar corretamente, um callback se ocorrer erro, e um objeto PositionOptions, que terão as opções de enableHighAccuracy , indica se deseja receber os resultados mais precisos, podem ter respostas mais lentes, ele recebe um valor booleano, o timeout tempo que o dispositivo demora para retornar uma posição, recebe um valor em milissegundos, e o maximumAge a possível posição de um cache ou posição atual, recebe o valor máximo em milissegundos .
Se você precisada posição enquanto tiver alteração, como movimentação do disponível, você pode utilizar o método watchPosition
navegator.geolocation.watchPosition(success, error, PositionOptions);
Os parâmetros são os mesmos do getCurrentPosition. Só que método watchPosition, retorna um id, caso precise cancelar o monitoramento, para isso basta passar o id pra o método clearWatch.
Prática – Geolocalização
Vamos criar uma página, onde será solicitado a utilização da API Geolocation, e com esses dados, mostrar no mapa, usando o Google Maps, a posição dele.
Primeiro vamos criar o arquivo index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>GeoLocalização</title>
<style type="text/css">
html, body, #map { height: 100%; margin: 0; }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/map.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>- Na linha 9 definimos o CSS, onde vamos deixar que paga ocupe 100% de altura. Por isso é definido também para o html e o body, além da div#map, onde será exibido o mapa;
- Na linha 11 incluímos o script da API do Google Maps.
- Na linha 12 incluímos o script map.js, que irá ser responsável por recuperar os dados da API Geolocation.
- Na linha 16 é definido a div#map onde será exibido o mapa.
Agora criaremos o script para resgatar as informações da localização e exibir no mapa.
Para uma melhor compreensão, será adicionado cada parte e será explicado, no final terá o arquivo completo:
document.addEventListener('DOMContentLoaded', function(){
});Na linha 1 adiciona o evento DOMContentLoaded, que irá executar o código só após carregar o DOM da página;
document.addEventListener('DOMContentLoaded', function(){
const target = document.querySelector('#map');
});Na linha 3, criamos uma variável target, que recebe querySelector retornando div#map
document.addEventListener('DOMContentLoaded', function(){
const target = document.querySelector('#map');
navigator.geolocation.getCurrentPosition(function(position) {
});
});Na linha 5 usar o geolocation, com o método getCurrentPosition, que recebe uma função anonima com parâmetro position, que irá retornar os dados da posição do usuário.
document.addEventListener('DOMContentLoaded', function(){
const target = document.querySelector('#map');
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordinate = new google.maps.LatLng(latitude, longitude);
});
});- Na linha 7 cria a variável latitude, que vai receber a latitude retornado do parâmetro position do callback;
- Na linha 8 cria a variável longitude, que vai receber a longitude retornado do parâmetro position do callback;
- Na linha 9 cria a variável coordinate, que vai receber a instancia da classe google.maps.LatLng, que passamos a latitude e longitude para o construtor.
document.addEventListener('DOMContentLoaded', function(){
const target = document.querySelector('#map');
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordinate = new google.maps.LatLng(latitude, longitude);
const optionsMap = {
center : coordinate,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
const map = new google.maps.Map(target, optionsMap);
});
});- Na linha 11 cria uma variável optionsMap, que recebe um objeto;
- Na linha 12 define o atributo center com a instancia da classe google.maps.LatLng;
- Na linha 13 define o zoom com valor 19;
- Na linha 14 define o mapTypeId, com google.maps.MapTypeId.ROADMAP que é o tipo do mapa;
- Na linha 17 cria uma variável map que recebe a instancia da classe google.maps.Map, que recebe onde será exibido o mapa, e as opções de configuração do mapa. Lembrando que as propriedades center e zoom, são obrigatórias.
document.addEventListener('DOMContentLoaded', function(){
const target = document.querySelector('#map');
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordinate = new google.maps.LatLng(latitude, longitude);
const optionsMap = {
center : coordinate,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
const map = new google.maps.Map(target, optionsMap);
const configMarker = {
position : coordinate,
map : map,
title: "Você está aqui!"
};
const marker = new google.maps.Marker(configMarker);
});
});- Na linha 19 cria uma variável configMarker que recebe um objeto para adicionar uma marcação de posição no mapa;
- Na linha 20 define a propriedade position, que receber as coordenadas, que é a instancia da classe google.maps.LatLng;
- Na linha 21 define a propriedade map, que recebe a instancia da classe google.maps.Map;
- Na linha 22 define a propriedade title que recebe o valor “Você está aqui!”;
- Na linha 25 cria uma variável marker que recebe a instancia da classe google.maps.Marker, que recebe o objeto configMarker com as configurações.
Observações
É necessário você executar num servidor http. Localmente você conseguirá testar, na sua hospedagem a conexão precisa está em https.
Caso não aparece o mapa quando criar, precisará de habilitar o aplicativo no google e gerar uma chave e adicionar com parâmetro key.
<script src="//maps.google.com/maps/api/js?key=_SUA_CHAVE_API_&sensor=false"></script>
Para conseguir ter acesso a essa chave, você pode seguir a documentação :
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=pt-br
Conclusão
Com API Geolocation você tem um mundo de possibilidades, claro que você poderá ter que contratar serviços ou utilizar serviços gratuitos, como para conseguir o endereço usar o serviço openstreetmap, ou calcular distância entre dois pontos e usar o serviço do Google como Distance Matrix do Google para mapear essa distância.
Experimente, teste, utilize, e sempre busque dá uma melhor experiência para seus usuários. Espero que tenham gostado e até a próxima.
