Javafree

Entendendo um pouco a API Google Maps

Publicado por paulofernandesjr em 07/08/2012 - 100.116 visualizações

Entendendo um pouco a API Google Maps

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)

0
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)

0
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.



O código de base para começar o aprendizado está abaixo:


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:


E no HTML:


? 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.


? 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á:


? 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.


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.


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.