Mapas de Google API 2

Atualizamos os artigos sobre mapas de google para mostrar a integração de mapas com o API 2.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 05/10/07
Valorize este artigo:
Certamente já conhecemos os Mapas de Google, um sistema que permite acessar a fotos de satélite de todo o mundo que teve bastante sucesso entre os Internautas. Se estamos lendo este artigo até poderemos saber que os Mapas de Google têm um API através da qual podemos integrá-lo como serviço em uma página web. Isto permite que em uma página web desenvolvida por nós mesmo possamos colocar mapas e vistas satélite de diferentes pontos do planeta, tudo de maneira gratuita.

Bom, pois em CriarWeb.com já havíamos publicado um par de artigos sobre os Mapas de Google que explicavam as regras mais básicas para começar a publicar mapas satélite em nosso site. Pero estes dois artigos se utilizavam uma API que Google atualizou, por tanto se tornava necessário uma revisão para mostrar códigos de integração de Google Maps que sejam compatíveis com o API que se utiliza agora.

Entretanto, os artigos anteriores continuam sendo muito interessantes para ler, porque explicam algumas coisas básicas como obter uma chave (Key) de Google, registrando-nos no site de Google Maps, para poder utilizar os mapas em nosso site.

Agora veremos um código para criar um mapa conforme às especificações do Google Maps API 2.

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Exemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#SUA CHAVE GOOGLE MAPS#" type="text/javascript"></script>
<script type="text/javascript">
   //<![CDATA[
   
   //função para carregar um mapa de Google.
   //Esta função é chamada quando a página termina de carregar. Evento onload
   function load() {
      //comprovamos se o navegador é compatível com os mapas de google
      if (GBrowserIsCompatible()) {
         //instanciamos um mapa com GMap, passando-lhe uma referência à camada ou <div> onde quisermos mostrar o mapa
         var map = new GMap2(document.getElementById("map"));   
         //centralizamos o mapa em uma latitude e longitude desejadas
         map.setCenter(new GLatLng(40.407,-3.68), 5);   
         //adicionamos controles ao mapa, para interação com o usuário
         map.addControl(new GLargeMapControl());
         map.addControl(new GMapTypeControl());
         map.addControl(new GOverviewMapControl()); ;
      }
   }
   
   //]]>
   </script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>


O código está comentado para uma melhor compreensão. Agora, daremos umas explicações adicionais:

Primeiro, embora esteja mais tarde no código, vamos ver o que há no body da página. Há que ver que definimos um evento onload="load()", que serve para chamar à função que gera o mapa, uma vez que tiver terminado de carregar a página.

Dentro do corpo da página, observemos na etiqueta div onde se mostrará o mapa:

<div id="map" style="width: 615px; height: 400px"></div>

O tamanho definido com estilos a esta camada é importante, porque será o tamanho de visualização do mapa. O API de Google Maps reconhecerá a largura e altura do container para mostrar um mapa justamente ocupando esse espaço.

Agora observamos o código Javascript.

Primeiro, se inclui a biblioteca onde está o API Javascript para os mapas de Google.

<script src="http://maps.google.com/maps?file=api&v=2&key=#SUA CHAVE GOOGLE MAPS#" type="text/javascript"></script>

Se observarmos, este código necessita que indiquemos nossa própria Key do API de Google Maps, que conseguimos ao nos registrar. Teremos que colocá-la substituindo o texto =#SUA CHAVE GOOGLE MAPS#.

Logo, podemos passar à função que gera o mapa, que se carrega quando termina de se mostrar a página (é chamada pelo evento onload).

Essa função está bastante comentada e além disso, Quero deixar para artigos posteriores diferentes pormenores da geração de mapas, porém é muito importante chamar a atenção sobre um ponto crítico, que me deu um quebra-cabeça quando estava provando os mapas, até que consegui encontrar o erro. Trata-se do método da classe GMap2 setCenter():

setCenter() tem que ser invocado justamente depois de instanciar o mapa!!!

Se tentamos instanciar o mapa e fazer coisas antes de centralizá-lo não funcionará. Isto é algo que está muito claro na documentação do API, porém como é um pouco longa de ler, é fácil de não percebermos .

Em minhas provas me falhou porque tentava colocar um tipo de mapa (vista satélite) e logo o centralizava. O problema é que não sai nenhum erro específico e é muito difícil encontrar o problema.





Comentários do artigo
Foram enviados 3 comentários ao artigo
3 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato