Se você busca aprender como utilizar a API de geolocalização com HTML5, você está no lugar certo!
A partir do HTML5, foi introduzida a API de Geolocalização, possibilitando retornar suas coordenadas, como latitude e longitude. Sendo assim, imagine a possibilidade de informar a distância do cliente até a loja? Ou informar sua posição para ele conseguir se localizar?
Ah, se você quiser aprender mais sobre HTML5, CSS3, Javascript e jQuery, conheça nossos cursos online de Front-End.
Você pode pensar que isso é possível apenas em aplicativos para smartphones. Porém, e se você conseguisse fazer isso em seu site?
Primeiro você precisa entender que 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.
Certamente 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"); }
Consequentemente, 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 seguintes opções:
Se você precisa da 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);
Outra coisa importane, é que 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.
Primeiramente 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.
Então criaremos 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>
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 adicione o evento DOMContentLoaded, que irá executar o código só após carregar o DOM da página;
document.addEventListener('DOMContentLoaded', function(){ var target = document.querySelector('#map'); });
Na linha 3, criamos uma variável target, que recebe querySelector retornando div#map
document.addEventListener('DOMContentLoaded', function(){ var target = document.querySelector('#map'); navigator.geolocation.getCurrentPosition(function(position) { }); });
Na linha 5 use o geolocation, com o método getCurrentPosition, que recebe uma função anônima com parâmetro position, que irá retornar os dados da posição do usuário.
document.addEventListener('DOMContentLoaded', function(){ var target = document.querySelector('#map'); navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var coordinate = new google.maps.LatLng(latitude, longitude); }); });
document.addEventListener('DOMContentLoaded', function(){ var target = document.querySelector('#map'); navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var coordinate = new google.maps.LatLng(latitude, longitude); var optionsMap = { center : coordinate, zoom: 19, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(target, optionsMap); }); });
document.addEventListener('DOMContentLoaded', function(){ var target = document.querySelector('#map'); navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var coordinate = new google.maps.LatLng(latitude, longitude); var optionsMap = { center : coordinate, zoom: 19, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(target, optionsMap); var configMarker = { position : coordinate, map : map, title: "Você está aqui!" }; var marker = new google.maps.Marker(configMarker); }); });
Veja o exemplo nessa página:
https://www.mxcursos.com/blog/exemplos/geolocalizacao/
É necessário você executar num servidor http. Localmente você conseguirá testar, na sua hospedagem a conexão precisa estar em https.
Caso não apareça o mapa quando criar, precisará habilitar o aplicativo no google, 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
Ah, se você quiser aprender mais sobre HTML5, CSS3, Javascript e jQuery, conheça nossos cursos online de Front-End.
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.
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
Fala David, muito bacana o conteúdo obrigado! Uma dúvida: É possível eu fazer algo parecido com o "localizar amigos" do iPhone? Por exemplo, eu envio uma solicitação para um número de celular, a pessoa aceita a compartilha comigo a sua localização em tempo real e aí eu consigo exibir este grupo de amigos num mapa pra saber onde todos estão naquele momento?
Tem algum exemplo de como implementar isso?
Anderson, uma forma q consigo ver essa possibilidade seria usar junto websocket pra mostrar esse tempo real. Encontrei um exemplo como seria trackeamento, talvez te ajude.
https://gist.github.com/erikasf/f4a78629bb21586ce44e
Olá meu amigo tudo bem? Desculpe incomodar e este posto não é tão recente assim, mas tenho uma dúvida. A precisando dele esta errada demais. Isto não deveria ter uma precisão de alguns metros? Está marcando muito longe, mas muito longe mesmo, de onde eu estou no momento.
A precisão dele é bem ruim msm...