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.