CriarWeb.com > Manuais > Desenvolvimento com o API de Google Maps

Como devemos saber, Panoramio é um serviço de Google onde os usuários podem enviar fotos de qualquer parte do mundo. Através do API de Google Maps podemos, de uma maneira muito rápida, sobrepor uma camada com as fotos do banco de dados de Panoramio. Neste artigo, veremos como incluir tais fotos para enriquecer nossos mapas com conteúdo atualizado e de utilidade.

Este artigo é muito simples, pelo menos assim parecerá para todos os que tiverem seguido o Manual de programação do API dos Mapas de Google que viemos publicando em CriarWeb.com. Só vamos utilizar uma nova classe que não havíamos visto até agora que é a classe Glayer.

Esta classe GLayer serve para sobrepor camadas com informação geográfica de outros websites. Neste caso utilizaremos o website de Panoramio para incluir as fotos inscritas, porém também se pode utilizar GLayer para incluir informação da Wikipedia, por exemplo.

No documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag podemos encontrar uma lista das possíveis camadas que até agora suporta o API de Google Maps.

Para criar uma camada com GLayer fazemos o seguinte:

var camada_panoramio = new GLayer("com.panoramio.all");

Simplesmente chamamos ao construtor de GLayer e lhe passamos como parâmetro o identificador da camada que queremos mostrar. Os identificadores possíveis estão no documento que fiz referência anteriormente.

Logo, para fazer com que o layer se mostre em um mapa de Google utilizamos um método, que já vimos anteriormente no manual de CriarWeb.com, da classe GMap2: addOverlay().

map.addOverlay(camada_panoramio);

Temos que passar a addOverlay() a instancia da camada que queremos mostrar, que criamos ao chamar ao construtor de GLayer.

O código completo para criar um mapa de Google com as fotos de Panoramio seria o seguinte:

function load() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(40.002,-4.12),8);
      
      var camada_panoramio = new GLayer("com.panoramio.all");
      map.addOverlay(camada_panoramio);

   }
}

window.onload=load

Podemos ver o exemplo em funcionamento em uma página à parte.