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.
Iniciando
A api é bastante simples e este é seu código:
navigator.geolocation.getCurrentPosition(success, error);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.
Success
Caso o usuário permita ser localizado, esta função irá me retornar o mapa com a sua localização e um pin marcando.
function success(position) {
var status = document.querySelector('status');
if (status.className == 'success') {
return;
}
status.className = 'success';
status.innerHTML = 'Sua localização está no mapa abaixo.';
var myLatlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOptions = {
zoom: 17,
center: myLatlng,
panControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var contentString = '<h2>Você está aqui</h2>' +
'<p>Este foi um exemplo de como pegar a geolocalização do usuário</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 700
});
var map = new google.maps.Map(document.getElementById('mapuser'), mapOptions);
var image = 'https://cdn2.iconfinder.com/data/icons/snipicons/500/map-marker-128.png';
var marcadorPersonalizado = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
animation: google.maps.Animation.BOUNCE
});
google.maps.event.addListener(marcadorPersonalizado, 'click', function() {
infowindow.open(map,marcadorPersonalizado);
});
}O que foi feito?
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.innerHTMLfoi 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.
Error
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:
function error(msg) {
var status = document.querySelector('status');
status.innerHTML = typeof msg == 'string' ? msg : 'Você não permitiu ser localizado.';
status.className = 'fail';
}O que foi feito?
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. - Através do
status.innerHTMLfoi passado um texto que irá informar uma mensagem ao usuário.
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.
Espero que vocês tenham entendido e feedbacks são sempre bem vindos.
Links de Referência: