O Google dispensa comentários com todas as inovações que ele faz, hoje falaremos um pouco sobre a API do Google Maps. API (Application Programming Interface ou Interface de Programação de Aplicativos) é a forma que temos de nos comunicar com as funções pré-programadas definidas pelo fornecedor, no caso, Google.
Esta API permite a criação de mapas com locais definidos, controle de zoom, tipos de mapa, geração de rotas, pesquisa por estabelecimentos, e muitas coisas mais.
Como começar
A primeira coisa que devemos fazer é acessar o link da página inicial da API (http://code.google.com/intl/pt-BR/apis/maps/signup.html), ler e aceitar o contrato, digitar a url do site que deseja usar a API e clicar no botão “Gerar chave da API”. (veja a figura 1)
Figura 1: Aceitando o contrato
Após isso, caso ainda não esteja logado com a sua “Google Account”, o Google pedirá para efetuar o login, nesse passo você obterá a chave para usar a API somente na url que digitou o site. Caso queira usar a API em outro site, deverá repetir esse processo para cada site que quiser. (Veja a figura 2)
Figura 2: Chave Gerada
Agora que já temos a chave, podemos usar a API no site. O Google disponibiliza alguns exemplos, para trabalhar com JavaScript, Flash, Serviço, etc..
Neste artigo abordaremos o uso da API para JavaScript e para isso devemos adicionar o seguinte script dentro do bloco head do HTML, no local “SUA_CHAVE”, você deve colocar a chave que o Google gerou para o site, veja o campo Your key is na figura 2.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=SUA_CHAVE"></script>
O código de base para começar o aprendizado está abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aprendendo a Usar a API Google Maps | Paulo Fernandes </title> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"></script> <script> var map = null; var geocoder = null; function inicializa() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mapa_base")); map.setCenter(new GLatLng(-22.9035393, -43.2095869), 13); geocoder = new GClientGeocoder(); } } </script> </head> <body> <div style="width: 500px; height: 300px"></div> </body> </html>
Este código não está difícil de entender, explicaremos as partes mais importantes:
- No onload(), a função inicializa() verifica se o navegador do usuário é compatível com a API Google Maps, caso positivo, o método captura uma div com id igual a “mapa_base” e defini o mapa centralizado. O local padrão que escolhi foi à cidade do Rio de Janeiro, que é representada pelas seguintes coordenadas de latitude e longitude -22.9035393, -43.2095869, respectivamente. O número seguinte, 13 representa o zoom no mapa, quando menor esse número, menor o zoom.
- No onunload(), a função GUnload() serve para limpar as estruturas internas e liberar a memória.
Para mais informações sobre os métodos acesse a documentação em português, através do seguinte link: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html. Essa documentação está interessante, e será a base para o artigo.
Exemplos Simples
No link a seguir podemos analisar diversos exemplos do poder desta API, http://code.google.com/intl/pt-BR/apis/maps/documentation/demogallery.html.
Para o artigo, colocaremos alguns exemplos interessantes para inserir um mapa personalizado no site.
- Descobrir qual a latitude e longitude do endereço: Isso é útil quando se pretende definir algum local como default ao entrar no site. Para isso faremos um formulário onde você digita o endereço e o mapa é carregado no endereço e exibe o posicionamento de latitude e longitude. O código JavaScript é esse:
function mostraEndereco(){ var endereco = document.getElementById("endereco").value; if ( geocoder ) { geocoder.getLatLng(endereco, function(point){ if ( !point ) { alert(endereco + " não encontrado"); } else { map.setCenter(point, 13); var marca = new GMarker(point); map.addOverlay(marca); marca.openInfoWindowHtml( endereco + "<br />" + point.toString() ); } } ); } else { alert("GeoCoder não identificado"); } }
E no HTML:
<form action="#" method="get"> <input size=”50” value="São Paulo" /> <input value="Mostrar Latitude/Longitude"/> </form>
- Definindo um evento: Para definir um evento precisamos utilizar o objeto GEvent. Seguindo a mesma linha do código, definiremos um evento, que será disparado toda vez que o marcador for clicado, fazendo com que a posição geográfica seja exibida, devemos colocar esse evento na função mostrarEndereco(), pois é nela que definimos o marcador.
GEvent.addListener(marca, "click", function() { marca.openInfoWindowHtml( endereco + "<br />" + point.toString() ); });
- Adicionando zoom no mapa: Para adicionar o controle de zoom, devemos adicionar um controle ao mapa, através do método addControl() e a esse controle devemos adicionar o controle do mapa, o mais correto é adicionar isso na função de inicialização: inicializa(), a linha completa que deve ser inserida é está:
map.addControl( new GSmallMapControl() );
- Adicionando forma de visualização: Podemos definir um controle para que o usuário possa ver o endereço na forma de mapa, hibrido ou satélite. Para isso devemos seguir a mesma linha de raciocínio para inserir o zoom, que seria adicionar um controle.
map.addControl( new GMapTypeControl() );
Exemplo Avançado
Para mostrar algo avançado que tal traçar a rota do ponto A ao ponto B? Para isso precisaremos que o usuário digite os valores dos pontos A e B. Para traçar a rota, vamos reescrever todo o exemplo, simplificando as configurações.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aprendendo a Usar a API Google Maps - Obter Rota | Paulo Fernandes </title> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/> <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thMmEQQDEPx3A3y5Q"></script> <script> var map = null; var geocoder = null; var from; var to; var directionsPanel = null; var directions = null; function inicializa() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mapa_base")); map.setCenter(new GLatLng(-22.5489433, -46.6388182), 7); geocoder = new GClientGeocoder(); map.addControl( new GSmallMapControl() ); map.addControl( new GMapTypeControl() ); directionsPanel = document.getElementById("route"); directions = new GDirections(map, directionsPanel); } } function gerarRota(){ from = document.getElementById("partida").value; to = document.getElementById("destino").value; if ( geocoder ) { geocoder.getLatLng(from, function(point){ if ( !point ) { alert(from + " não encontrado"); } } ); geocoder.getLatLng(to, function(point){ if ( !point ) { alert(to + " não encontrado"); } } ); var string = "from: " + from + " to: "+to; directions.clear(); directions.load(string); GEvent.addListener(directions, "error", erroGetRoute); } else { alert("GeoCoder não identificado"); } } function erroGetRoute(){ alert("Não foi possivel traçar a rota de: " + from + " para: " + to ); } </script> </head> <body> <form action="#" method="get"> <label for="partida">Partida</label> <input value="São Paulo" size="50" /> <br /> <label for="destino">Destino</label> <input value="Rio de Janeiro" size="50" /> <br /> <input value="Obter Rota"/> </form> <div style="width: 800px; height: 500px;"></div> <div style="width: 300px; height: 500px; position: absolute; right: 0; top: 0;"></div> </body> </html>
Para mostrar a rota, tivemos que criar uma nova div com o id igual à “route”, é neste local que exibiremos o passo a passo da rota traçada. Essa captura do local foi feito nesta linha directionsPanel = document.getElementById(“route”); Para traçar a rota, devemos instanciar o objeto GDirections e informar para ele carregar a rota através do método directions.load(string);
No método load devemos passar os dois endereços escritos por extenso, antes o endereço de partida devemos atribuir from: e antes do endereço de destino to: , ficando a string completa from: São Paulo to: Rio de Janeiro , por exemplo.
Caso algum dos dois endereços não seja encontrado, o código exibirá um alert informando que a rota não pode ser traçada.
Conclusão
Com este artigo pudemos perceber o poder que a API nos dá, ela nos fornece outras diversas possibilidades que podem ser vistas na documentação oficial. O objetivo do artigo foi introduzir os principais conceitos e o que se pode utilizar no site de sua empresa, por exemplo.
Algo que devemos tomar cuidado é na declaração das variáveis, pois o local onde ela é declarada pode fazer com que a API se porte de forma indesejada. Por exemplo, quando declaramos uma marca, se tivemos declarado ela fora da função a cada novo endereço, a marca anterior seria perdida, mas repare que a informação de latitude e longitude é perdida, mantendo somente a ultima. Faça o teste, declare a variável fora do método, acredito que achará bem interessante.
Pode ser que exista outra forma de fazer o que demonstramos ou até que o que foi demonstrado esteja errado, mesmo que aparentemente funcionando.
