Neste post vou escrever sobre a Geolocation. A propósito, se não autorizou o acesso à sua localização, volte e autorize para vê-la no mapa.
<< Sua geolocalização vai aparecer aqui >>
A Geolocation do HTML 5 recupera a localização do usuário, especificamente a longitude e a latitude do ponto de acesso à internet. Isso pode variar de rede à rede e das configurações que cada uma pode ter. Mas em situações normais, a localização do acesso será identifica.
Juntando a Geolocation com a API de mapas do Google, temos o resultado acima, que é a exibição da localização no mapa.
Vamos lá, aos códigos! Primeiros exemplos e comentários e depois todo código disponível para download.
Como vamos monta um mapa, é preciso fazer referência à API de Mapa do Google, linha 8. O parâmetro sensor=false indica que não estou usando a API a partir de aplicação com sensor, como um GPS de um Smartphone por exemplo:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>HTML 5 - Geolocalização e API de Mapa Google</title> | |
| <!-- Adiciona arquivo externo de javascript - API de Mapa do Google --> | |
| <script src="http://maps.google.com/maps/api/js?sensor=false"></script> |
Primeiro criamos a que recupera a localização. Ela verifica se o Navegador suporta Geolocalização e em caso positivo segue para a montagem do mapa:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Inicia os scripts: o que recupera a geolocalização e o que exibe o mapa --> | |
| <script type="text/javascript"> | |
| var mensagens = document.getElementById("mensagens"); | |
| // Função que recupera a Geolocalizacao, utilizando funções do próprio navegador. | |
| function recuperaGeolocalizacao() { | |
| // Se o navegador suporta geolocalização, recupera as informações e chama a função que vai usá-las para exibir o mapa; | |
| if (navigator.geolocation) { | |
| //Sucesso | |
| navigator.geolocation.getCurrentPosition(MostraLocalizacao, Erro); | |
| } | |
| //Erro | |
| else { | |
| mensagens.innerHTML = "A geolocalização não é suportada pelo seu navegador."; | |
| } | |
| } |
O objeto retornado, o position, tem as propriedades latitude e longitude, dentro de coords. Para a API de mapa do Google, precisamos apenas dessas duas informações:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Essa é a função que recebe os dados de Geolocalização, no objeto position | |
| function MostraLocalizacao(position) { | |
| // Recupera a latitude | |
| lat = position.coords.latitude; | |
| lon = position.coords.longitude; | |
| latitude = document.getElementById('latitude') | |
| latitude.innerHTML = "Latitude: " + lat; | |
| longitude = document.getElementById('longitude') | |
| longitude.innerHTML = "Longitude: " + lon; | |
| latlon = new google.maps.LatLng(lat, lon) | |
| divMapa = document.getElementById('divMapa') | |
| divMapa.style.height = '250px'; | |
| divMapa.style.width = '500px'; | |
| var Opcoes = { | |
| center: latlon, zoom: 15, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| mapTypeControl: true, | |
| navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } | |
| }; | |
| var map = new google.maps.Map(document.getElementById("divMapa"), Opcoes); | |
| var marcador = new google.maps.Marker({ position: latlon, map: map, title: "Você está aqui" }); | |
| } |
Acima foi a função de sucesso. Abaixo a função de erro (quando não o navegador não suporta Geolocation):
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Erro(error) { | |
| switch (error.code) { | |
| case error.PERMISSION_DENIED: | |
| mensagens.innerHTML = "A permissão para buscar Geolocalização foi negada pelo navegador.<br /><br />Tente gerenciar as configurações de compartilhar local." | |
| break; | |
| case error.POSITION_UNAVAILABLE: | |
| mensagens.innerHTML = "Sua localização está indisponível." | |
| break; | |
| case error.TIMEOUT: | |
| mensagens.innerHTML = "A busca pela sua localização excedeu o tempo limite." | |
| break; | |
| case error.UNKNOWN_ERROR: | |
| mensagens.innerHTML = "Ocorreu um erro desconhecido." | |
| break; | |
| } | |
| } |
É preciso também preparar os elementos que receberão as mensagens de sucesso ou erro e uma <div> que receberá o mapa da API do google. Veja o exemplo das mensagens:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- No P id = mensagens é apresentada mensagem de sucesso ou de erro, quando o caso --> | |
| <p id="mensagens">Esta é a sua geolocalização:</p> | |
| <p> | |
| <!-- Em caso de sucesso, nos itens latitude e longitude serão adicionados os dados de geolocalização --> | |
| <span id="latitude"></span> | |
| <span id="longitude"></span> | |
| </p> | |
| <!-- div que recebe o mapa através do uso da API Google --> | |
| <div id="divMapa"></div> |
Concluídos estes passos, basta chamar a função que recupera a Geolocalização, no caso a recuperaGeolocalizacao(). Pode ser no onclick de um botão ou no onload da página dentro da tag <body> , como no exemplo a seguir. A própria função se encarregará de montar o mapa ou mostrar o erro, a depender do resultado.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| </head> | |
| <!-- Quando carrega a página, chama a função recuperaGeolocalizacao() do script javascript da página. | |
| Esta função também pode ser chamada por botões. --> | |
| <body onload="recuperaGeolocalizacao();"> |
E é isso, o resultado é o local exibido no mapa. Se copiar a latitude e longitude e lançar no Google, o resultado é exatamente o mesmo. Teste!
Fica o código completo disponível para download aqui. Espero ter sido útil!
Nenhum comentário:
Postar um comentário