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