Como debemos saber, Panoramio es un servicio de Google donde los usuarios pueden enviar fotos de cualquier parte del mundo. A través del API de Google Maps podemos, de una manera muy rápida, sobreponer una capa con las fotos de la base de datos de Panoramio. En este artículo veremos cómo incluir dichas fotos para enriquecer nuestros mapas con contenido actualizado y de utilidad.

Este artículo es muy sencillo, al menos así les parecerá a todos los que hayan seguido el Manual de programación del API de los Mapas de Google que venimos publicando en DesarrolloWeb.com. Sólo vamos a utilizar una nueva clase que no habíamos visto hasta ahora que es la clase Glayer.

Esta clase GLayer sirve para superponer capas con información geográfica de otros sitios web. En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta, pero también se puede utilizar GLayer para incluir información de la Wikipedia, por ejemplo.

En el documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag podemos encontrar una lista de las posibles capas que por ahora soporta el API de Google Maps.

Para crear una capa con GLayer hacemos lo siguiente:

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

Simplemente llamamos al constructor de GLayer y le pasamos como parámetro el identificador de la capa que queremos mostrar. Los identificadores posibles están en el documento ese al que hacía referencia.

Luego, para hacer que el layer se muestre en un mapa de Google utilizamos un método, que ya hemos visto anteriormente en el manual de desarrollo web .com, de la clase GMap2: addOverlay().

map.addOverlay(capa_panoramio);

A addOverlay() le tenemos que pasar la instancia de la capa que queremos mostrar, que hemos creado al llamar al constructor de GLayer.

El código completo para crear un mapa de Google con las fotos de Panoramio sería el siguiente:

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

   }
}

window.onload=load

Podemos ver el ejemplo en marcha en una página aparte.