O básico para começar a desenvolver com Google Maps I

Ao longo destes artigos veremos a grandes passos como funciona este serviço de Google e realizaremos uma pequena introdução à API através de um exemplo simples de integração de um mapa em nossa página web.

Um dos últimos serviços do gigante Google que mais deu o que falar é Google Maps. Em um navegador, e com um simples clique o usuário pode dar a volta virtual pelo mundo, desfrutando de fotos aéreas de grande qualidade em algumas zonas, e do mapeamento vetorial completo de outras. Porém, o interessante do serviço é que Google oferece uma API (Application Programming Interface) para todos aqueles interessados em usar este serviço e integra-lo em sua própria página, de forma simples e gratuita. Ao longo deste artigo veremos os fundamentos para integrar Google Maps em nosso website e através de um exemplo criaremos um primeiro mapa usando as funcionalidades mais básicas da API.

A característica que sem dúvida mais chama a atenção do funcionamento de Google Maps é a sua interatividade. Podemos clicar várias vezes no mapa para nos movermos pelo mundo, dar zoom e escolher o tipo do mapa sem necessidade de recarregar a página, tudo isso de forma fácil e intuitiva. Este tipo de aplicação web se enquadra dentro da tecnologia que Adaptive Path denominou AJAX (Asynchronous Javascript + XML). Não vamos aprofundar neste artigo no planejamento AJAX, entretanto, é conveniente fazer um breve comentário para conhecer grandes aspectos de seu funcionamento.

AJAX não é uma nova tecnologia, e sim uma combinação de tecnologias já existentes para oferecer uma nova visão na hora de criar aplicações web. Seguindo um planejamento AJAX, usaremos CSS e DHTML para a apresentação dos dados, o DOM (Document Object Model) para tratar dinamicamente a apresentação destes dados, XML e XSLT para o correto intercâmbio e manipulação da informação, XMLHttpRequest para obter a informação de maneira assíncrona (quando nos peça o usuário) e Javascript para coordenar a todos estes agentes ao nosso gosto dependendo de nossas necessidades. Desta forma, temos um "motor" javascript entre a apresentação e o servidor, que nos fará petições de informação de forma assíncrona para incorpora-la imediatamente à apresentação de nossa página, sem necessidade de recarregá-la e fazer uma nova petição de página completa ao servidor.

Em suma, esta é a filosofía de funcionamento de AJAX, um planejamento que sem dúvida oferece grandes possibilidades, como as que podemos ver na prática com Google Maps. Podemos ver outros exemplos de aplicações AJAX em Google Suggest e Gmail.

Como vimos anteriormente na introdução deste artigo, Google nos permite usar Google Maps em nossa página web de forma gratuita. A seguir veremos como temos de proceder para realizar nosso primeiro mapa, vendo os fundamentos da API que Google nos oferece.

Os requisitos para começar a trabalhar são realmente escassos. Com um simples editor de html e um servidor público podemos começar a criar mapas em nosso domínio. É importante assinalar que o servidor onde hospedarmos nossos scripts para Google Maps há de ser público, entre outras razões porque Google monitorizará o uso que fizermos do mapa, de acordo com seus termos e condições de uso.

O primeiro passo para começar a usar Google Maps é obter uma chave (key) que é concedida quando fazemos a inscrição no serviço. Esta chave é única para cada usuário de Google Maps e é restritiva no que se refere ao seu uso, já que só nos permite usar os scripts em um dos diretórios de nosso servidor.

Uma vez que tivermos nossa chave, já estaremos em condições de criar nosso primeiro mapa:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

      <title>Introdução a Google Maps - CriarWeb</title>

      <script src="http://maps.google.com/maps?file=api&v=1&key=ADICIONE_SUA_CHAVE_AQUI" type="text/javascript"></script>
   </head>

   <body>
       <div id="map" style="width: 400px; height: 300px"></div>
       <script type="text/javascript">

   var map = new GMap(document.getElementById("map"));
   map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

    </script>

   </body>
</html>

Executando este código em um servidor público obtemos como resultado o seguinte mapa, que nos mostra uma vista aérea de Madri centralizada na Puerta de Alcalá:

Como se pode ver no código, criamos uma única camada com id="map" destinada a conter nosso Google Map. O script que vem a seguir da declaração desta camada é o que gera o mapa. Vejamos sentença a sentença o que faz o código:

var map = new GMap(document.getElementById("map"));

Esta sentença gera o mapa especificando como destino o id="map" que atribuímos previamente para nossa camada container. Note que o mapa se adaptará ao tamanho que tivermos especificado para esta camada.
map.setMapType(G_SATELLITE_TYPE);

setMapType nos permite especificar o tipo de mapa que queremos visualizar. Como se pode ver nos setores situados acima à direita no mapa, podemos escolher entre as vistas "Map" (mapa vetorial), "Satellite" (fotografia de satélite) e "Hybrid" (combinam ambas vistas). Em nosso caso, já que Google ainda não dispõe de mapas vetoriais para Espanha, escolhemos a vista de satélite que nos mostra a fotografia aérea da zona.
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

addControl nos permite incorporar elementos de controle ao mapa, tal e como são o controle de zoom que vemos à esquerda e o selecionador do tipo de mapa. Dependendo de nossas necessidades podemos incorporar estes controles, ou inclusive versões de menor tamanho (GSmallMapControl) para mapas em tamanho reduzido. Por padrão, o mapa se mostra sem controles.
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

Com esta sentença indicamos ao nosso GMap que lugar queremos que mostre, mediante o método centerAndZoom. Os parâmetros são um GPoint (que geramos a seguir a partir de sua latitude e longitude) e o nível de zoom que queremos mostrar, de 1 a 16, sendo o nível 1 o mais próximo e o 16 o mais afastado.

Google Maps localiza os pontos nos mapas a partir de sua latitude e longitude. Esta informação devemos administra-la nós mesmos, e para isso o mais adequado é usar algum dos serviços de geocoding disponíveis na rede. Um deles é por exemplo o de InfoSports, no qual simplesmente ao clicar em qualquer ponto do mapa obteremos a latitude e longitude desejadas para esse ponto. Existem outros serviços de geocoding disponíveis de forma gratuita na red que não exigem buscar o ponto físico no mapa, tais como Geocoder.us e geonames.org, nos quais podemos realizar buscas a partir do nome da localização que buscamos.