Writings - API Geolocation | Thulio Philipe, Senior Software Developer
March 10, 2014 | 3 min read
Depois de tanto tempo distante, para ser mais preciso 1 mês e 16 dias estou de volta e hoje vou falar sobre a API Geolocation do HTML5, que por sinal já é "bastante" antiga mas eu ainda não tinha conseguido fazer nada com ela, nem se quer mostrar um mapa :( Maaas agora as coisas mudaram, depois de ver com calma e brincar um pouco, finalmente consegui utiliza-la e hoje irei mostrar como, LET'S WORK!
O resultado deste post é este aqui e você pode ver todo o código comentado aqui.
A api é bastante simples e este é seu código:
Papaya with sugar hein?
Você passa como parâmetros duas funções callback: success e error, que irão determinar o que vai acontecer caso o usuário permita ser localizado ou não.
Caso o usuário permita ser localizado, esta função irá me retornar o mapa com a sua localização e um pin marcando.
var status = document.querySelector('status');
if (status.className == 'success') {
status.className = 'success';
status.innerHTML = 'Sua localização está no mapa abaixo.';
var myLatlng = new google.maps.LatLng(position.coords.latitude,
var contentString = '<h2>Você está aqui</h2>' +
'<p>Este foi um exemplo de como pegar a geolocalização do usuário</p>';
var map = new google.maps.Map(document.getElementById('mapuser'), mapOptions);
var image = 'https://cdn2.iconfinder.com/data/icons/snipicons/500/map-marker-128.png';
google.maps.event.addListener(marcadorPersonalizado, 'click', function() {
Criei uma variável status que recebe o id com o mesmo nome que foi determinado no meu html. E se status receber a classe success ele retorna tudo que estiver dentro da função success.
O que a função success faz?
Adição da classe success através do status.className.
Através do status.innerHTML foi passado um texto que irá informar uma mensagem ao usuário.
A exibição do mapa através das coordenadas que foram retornadas pela API quando o usuário aceitou ser localizado e a estilização do mapa incluindo um pin e ocultando algumas opções do mapa.
Sobre a exibição do mapa, recomendo ler o material onde falo tudo sobre a api do google maps e a única diferença nesta parte foi que inseri o retorno position.coords.latitude, position.coords.longitude da api na variável myLatlng e não declarei a latitude e longitude como no exemplo do outro post.
Caso o usuário não permita ser localizado, esta função irá me retornar uma mensagem informando que o usuário não permitiu ser localizado.
Na função error eu tenho:
status.innerHTML = typeof msg == 'string' ? msg : 'Você não permitiu ser localizado.';
status.className = 'fail';
Criei uma variável status que recebe o id com o mesmo nome que foi declarado no meu html.
O que a função error faz?
Adição da classe fail através do status.className.
Resumindo A API é bastante simples e te retorna dois valores position.coords.latitude onde indica a latitude e position.coords.longitude onde indica a longitude, só precisei indicar onde queria esse resultado e o resto eu já tinha feito praticamente tudo no outro post.