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, 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" type="text/javascript"></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" type="text/javascript"></script>
<script type="text/javascript">
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 onload="inicializa()" onunload="GUnload()">
<div id="mapa_base" 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 define o mapa centralizado. O local padrão que escolhi foi a 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, quanto 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 deste link. Essa documentação está interessante, e será a base para o artigo.
Exemplos simples
Neste link podemos analisar diversos exemplos do poder desta API.
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 id="form_mapa" action="#" method="get">
<input type="text" name="endereco" id="endereco" size="50" value="São Paulo" />
<input type="button" name="enviar" id="enviar" value="Mostrar Latitude/Longitude" onclick="mostraEndereco()"/>
</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 é esta:
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, híbrido 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"
type="text/javascript"></script>
<script type="text/javascript">
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 onload="inicializa()" onunload="GUnload()">
<form id="form_mapa" action="#" method="get">
<label for="partida">Partida</label>
<input type="text" name="partida" id="partida" value="São Paulo" size="50" />
<br />
<label for="destino">Destino</label>
<input type="text" name="destino" id="destino" value="Rio de Janeiro" size="50" />
<br />
<input type="button" name="enviar" id="enviar" value="Obter Rota" onclick="gerarRota()"/>
</form>
<div id="mapa_base" style="width: 800px; height: 500px;"></div>
<div id="route" 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 feita 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 a tivemos declarado 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.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?