Primeiros contatos com Google Maps JavaScript API V3

Monday, 20. June 2011

Resolvi relatar um pouco do contato que tive com a API do Google Maps ao desenvolver minha monografia.

O Google Maps é um serviço de acesso a mapas do mundo inteiro que você pode usar em seu navegador, com ele você pode ainda localizar estabelecimentos, traçar rotas para destinos que você escolher e tudo isso com uma interface muito simples.

Atualmente o Google Maps API se encotra na versão 3.

Logo que comecei a pesquisar sobre a API do Google Maps, em todos os tutoriais que encontrava diziam sobre uma tal chave de acesso. Porém ao ler a documentação descobri que ela só é necessária até a versão 2.

Então, para incluir a API em seu sistema, basta fazer o import do javascript em sua página:

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" />

Feito o import, basta criar uma DIV onde o mapa será exibido:

<div id="map_canvas"
style="width:50%; height:70%" align="center">
</div>

Depois de importado o javascript e criado a DIV que será usada, você deverá inicializar um objeto MAP. Chamando a função initialize() em algum evento da sua página, seja onload ou no onclick de algum botão.

<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-19.9666667,-44.2166667);
var myOptions = {
   zoom: 13,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
   map = new google.maps.Map(
      document.getElementById("map_canvas"), myOptions);
}
</script>

No código acima, o Maps será inicializado na div criada no início do Post com o foco inicial do mapa estando em:
Latitude e Longitude:-19.9666667,-44.2166667

Com o zoom no nível 13.

Bem simples. Caminhando mais um pouco na API você decide que precisa marcar alguns PONTOS no mapa, pra isso basta usar uma função em javascript como a:

function marcaPonto(address) {
 new geocoder.geocode( { 'address': address}, function(results, status) {
   var marker2 = new google.maps.Marker({map: map,
   position: results[0].geometry.location,
   icon:"http://labs.google.com/ridefinder/images/mm_20_yellow.png"});
 });
}

Essa função será chamada passando como parâmetro o endereço, exemplo:

address = "Rua XYZ,  numero  -  cidade  cep  -  estado , País";

Para marcar o ponto a função geocoder.geocode da API é chamada, ela é responsável por pegar um endereço(address) e te retornar as coordenadas(latitude, longitude) do local.

De posse das coordenadas a função google.maps.Marker será chamada para de fato marcar um ponto na tela, onde MAP é a variavel onde foi inicializado o mapa anteriormente e o caminho após “icon:http://labs.google.com/ridefinder/images/mm_20_yellow.png” se refere ao ícone que será apresentado na tela para marcar o local indicado.

A partir daí N outras variações podem ser implementadas e baseado nestes passos diversos sistemas de geovisualização se tornam possíveis.

Através da API também é possível marcar áreas como ráios ou polígonos e tudo muito bem descrito na documentação oficial.

Fontes:
Google Maps API Oficial