Utilizando a API JavaScript do Google Maps em seu projeto

Ah, como é bom viver no mundo moderno. Viver em tempos em que temos acesso fácil e de maneira gratuita a ferramentas de geolocalização. Ferramentas essas que até pouco tempo eram coisas de “outro planeta” e inimagináveis no nosso dia-a-dia.

E dentre elas a mais conhecida (e talvez fácil de usar) é a do onipresente Google, a Google Maps API. Essa versátil API vem em diversas sabores, porém hoje iremos tratar de sua versão em JavaScript voltada a páginas na web.

Nota: No modo gratuito o número de requisições da API JavaScript do Google Maps é limitado em 2500 por dia. (Mas não se preocupe, atualmente o Google oferece um ano gratuito do plano “premium” e mais 300 dólares de bônus para gastar no seu eco-sistema de cloud computing, do qual a API faz parte.)

Mas vamos ao que interessa, o código simples e bem explicado.

Mas primeiro…

Antes de botarmos a mão na massa será necessário realizar o cadastro gratuito no Google Cloud Plataform para obtenção da chave de acesso da API JavaScript do Google Maps. O cadastros é rápido e fácil de fazer. Só tome cuidado para gerar a chave de API para a versão JavaScript!

Obtendo a geolocalização do usuário via HTML5

O HTML5 é a maneira mais fácil de ser obter a geolocalização do usuário, além de ser compatível com todos os navegadores em suas versões mais recentes.

O único ponto negativo é que, devido a questões de privacidade, será exibido um popup para que o usuário aceite compartilhar sua localização com a página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function obterLocalizacao(){
// Verifica se é possível obter a geolocalização do usuário.
if ( navigator.geolocation ){
navigator.geolocation.getCurrentPosition(

// Em caso de sucesso salva as informações de Latitude e Longitude nos input especificos.
function( posicao ){
jQuery("#geoLatitude").val(posicao.coords.latitude);
jQuery("#geoLongitude").val(posicao.coords.longitude);
},

// Em caso de erro faz o tratamento
function ( erro ){
var geoError = 'Erro: ';
switch( erro.code ) {
case erro.PERMISSION_DENIED:
geoError += 'Usuário não autorizou acesso a geolocalização.';
break;
case erro.POSITION_UNAVAILABLE:
geoError += 'Localização indisponível.';
break;
case erro.TIMEOUT:
geoError += 'Tempo limite expirado.';
break;
case erro.UNKNOWN_ERROR:
geoError += 'Algo deu errado!';
break;
}
console.log( erroDescricao )

jQuery("#geoError").val(geoError);

}
);
}
}

// Chama a função quando a página é carregada, mas pode ser utilizada com outros "gatilhos" como "click".
jQuery(document).ready(function() {
obterLocalizacao();
});

Agora que você já tem os dados nos “inputs” fica fácil de salva-los da forma que achar mais apropriada.

Carregando a API JavaScript do Google Maps

Aqui não tem muito segredo, mas não se esqueça de colocar a chave de API que criamos.

1
<script async defer src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_DA_API&callback=initMap"></script>

Exibindo os dados de geolocalização no mapa

O último passo é a exibição dos dados de latitude e longitude no Google Maps dentro de nosso site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function initMap() {

// Define uma variavel com a longitude e latitude
var geoLatLng = {lat: AQUI_VAI_A_LATITUDE, lng: AQUI_VAI_A_LONGITUDE};

// Cria o obejto do mapa e informa o container onde será inserido: #geoMapa
var map = new google.maps.Map(document.getElementById('geoMapa'), {
center: geoLatLng,
zoom: 17
});

// Adiciona um ponto no mapa
var marker = new google.maps.Marker({
position: geoLatLng,
map: map,
title: 'Legenda do seu ponto no mapa.'
});

// Atualiza o mapa com as informações customizadas
var infoWindow = new google.maps.InfoWindow({map: map});
}

Essa função ser executada automaticamente pelo callback do carregamento da API que fizemos no passo anterior.

E chegamos ao fim

Agora que você sabe como capturar a localização e exibi-la no mapa basta adaptar o código para suas necessidades. É possível por exemplo carregar o mapa apenas quando o usuário clickar em um botão, para isso basta remover o callback na chamada da API e executar a função “initMap()” no evento “onClick”.