Nesta aula veremos um exemplo de como capturar a latitude e longitude do visitante de uma página web ou de um usuário de um aplicativo e mostrar a sua localização no Google Maps.
Preparando o mapa e obtendo uma chave no Google Developer
- O código a seguir, obtido na documentação do Google Maps, é um exemplo de como criar um mapa personalizado.
<!DOCTYPE html> <html> <head> <title>Exemplo de Localização do usuário</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> #map { height: 100%; } /* Opcional: deixa o mapa ocupando toda a tela do navegador */ html, body { height: 100%; margin: 0; padding: 0; } </style> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> <script> var map; function initialize() { var mapOptions = { zoom: 8, // zoom do mapa center: {lat: -34.397, lng: 150.644} // latitude e longitude inicial do mapa. }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new google.maps.Marker({ position: {lat: -34.397, lng: 150.644}, // latitude e longitude do marcador (pin), normalmente é o mesmo do mapa mostrado na linha 24. map: map }); var infowindow = new google.maps.InfoWindow({ content: '<p>Marker Location:' + marker.getPosition() + '</p>' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map"></div> </body> </html> - Como o código de exemplo em mãos, vamos obter agora uma chave para a API, a chave garante que as requisições realizadas para a API do Maps são legítimas e que são de sua propriedade. Para obter a chave acesse https://developers.google.com/maps/documentation/javascript/get-api-key?hl=pt-br
- Copie a chave gerada e edite a linha <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY“></script>
Capturando a latitude e longitude do visitante do site.
O HTML 5 possui a API geolocation que é acionada a partir do objeto navigator. A documentação e outros exemplos de uso podem ser consultadas em https://developer.mozilla.org/pt-BR/docs/Using_geolocation
Um exemplo bem simples do uso da API geolocation seria este script;
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("O seu navegador não suporta Geolocalização.");
}
// função de retorno caso o navegador suporte Geolocalização.
function showPosition(position) {
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}
</script>
Agora vamos aplicar este script no código do nosso mapa, ele será colocado dentro do bloco <HEAD> de modo que ele seja executado junto com o carregamento da página. O código completo deverá ficar assim;
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Localização do usuário</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
/* Opcional: deixa o mapa ocupando toda a tela do navegador */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
//script para captura de geolocalização do visitante da página web.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("O seu navegador não suporta Geolocalização.");
}
// função de retorno caso o navegador suporte Geolocalização.
function showPosition(position) {
alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8, // zoom do mapa
center: {lat: -34.397, lng: 150.644} // latitude e longitude inicial do mapa.
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644}, // latitude e longitude do marcador (pin), normalmente é o mesmo do mapa mostrado na linha 24.
map: map
});
var infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:' + marker.getPosition() + '</p>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
O resultado disso será:
Depois de clicar em permitir, temos como resultado a Latitude e Longitude do visitante.
Passando a latitude e longitude do visitante para o Google Maps
Agora a mágica acontece… vamos pegar estes valores que capturamos da latitude e longitude e passarmos para o Google Maps, para isso, vamos fazer algumas adaptações em nossos códigos.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Localização do usuário</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
/* Opcional: deixa o mapa ocupando toda a tela do navegador */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_AQUI"></script>
<script>
//script para captura de geolocalização do visitante da página web.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("O seu navegador não suporta Geolocalização.");
}
// função de retorno caso o navegador suporte Geolocalização.
function showPosition(position) {
// guarda os valores capturados em variáveis.
latitude = position.coords.latitude;
longitude = position.coords.longitude;
map = 0;
google.maps.event.addDomListener(window, 'load', initialize());
}
function initialize() {
var mapOptions = {
zoom: 18, // zoom do mapa
center: {
lat: latitude,
lng: longitude
} // latitude e longitude inicial do mapa.
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: {
lat: latitude,
lng: longitude
}, // latitude e longitude do marcador (pin), normalmente é o mesmo do mapa mostrado na linha 24.
map: map
});
var infowindow = new google.maps.InfoWindow({
content: '<p>Minha Localização:' + marker.getPosition() + '</p>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
OBS: Neste código acima, usamos 3 variáveis globais em JS. Uma variável global é aquela que serve para todas as functions do código. Para criar uma variável global basta omitir a declaração var. Veja por exemplo que a linha var map; foi alterada para map = 0; isso torna a variável map uma variável global… legal né?
E finalmente, o resultado final:
Permissão para usar o GPS do dispositivo (CORDOVA Geolocation)
O exemplo mostrado até aqui se aplica apenas para páginas WEB. Já para aplicativos, devemos solicitar autorização ao sistema do dispositivo para utilizar o GPS nativo e é justamente para isso que existe o CORDOVA.
em aplicativos você deverá adicionar o plugin cordova-plugin-geolocation, veja a documentação e exemplos aqui: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/ note que o código para capturar a latitude e longitude é exatamente o mesmo da API padrão do HTML 5, resumindo, basta apenas adicionar o plugin no aplicativo e tudo deverá funcionar maravilhosamente bem.