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:
É preciso criar as funções javascript para ordenar os acontecimentos, que são 3: Recuperação da localização, Montagem do mapa e tratamento de erros.
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:
Depois, criamos a função que monta o mapa. Ela recebe os parâmetros de latitude e longitude do resultado da função que recupera a Geolocalização.
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:
No uso da API, podemos configurar opções, como altura (height), largura (width), tipo de mapa (MapTypeId) e etc. Para conhecer mais sobre esta API, o ideal é acessar a documentação completa on-line em https://developers.google.com/maps/documentation/javascript/.
Acima foi a função de sucesso. Abaixo a função de erro (quando não o navegador não suporta Geolocation):
É 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:
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.
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