Como mostrar a sua localização no Google Maps (Geolocation)

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

  1. 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>
  2. 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
  3. 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.