Voy a tratar de diseñar un visor de cartografía utilizando el API de Google Maps ( si quereis saber más sobre este tema, podeis leer artículos en esta misma web que hacen referencia:  Google Web Toolkit & Google Maps, Integración de un servicio WMS en GoogleMaps usando GWT )  con la cartografía de OpenStreetMap y además voy a incluir datos de servicios de tipo georeferenciado (panoramio, youtube, flickr, kml, wikipedia,…) en dicho mapa.

Ya aviso que, una vez que muestro todos los servicios en el mapa,  queda un mapa demasiado lleno de elementos, pero eso  es justo lo que pretendo con este visor, tener todos los elementos en el mismo mapa y que se visualicen tanto fotos, videos, artículos de la wikipedia,kml,… a la vez, permitiéndo incluso añadir muchos más elementos.

En primer lugar, para mostrar el mapa de Google Maps, necesito registrar la clave previamente para el sitio web en cuestion que voy a tratar.

Y una vez registrada la clave ya se puede realizar el visor,  la programación del visor sería la siguiente:

//Hojas de estilo de google maps
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/base/base-min.css">
 <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=clave_registrada_en_google"></script>

<script
type="text/javascript" charset="utf-8">
 google.load("maps", "2.x");

 function load()
 {
 if (!GBrowserIsCompatible())
 return;

 //definicion de variable de copyright del mapa
 var copyOSM = new GCopyrightCollection("GIS&Chips 2010");
 copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));

 //definicion de las tiles de OpenStreetMap que iran por bajo del mapa
 var tilesMapnik     = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
 var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile/{Z}/{X}/{Y}.png'});
 var tilesCycle = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://a.andy.sandbox.cloudmade.com/tiles/cycle/{Z}/{X}/{Y}.png'});

 var mapMapnik     = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
 var mapOsmarender = new GMapType([tilesOsmarender], G_NORMAL_MAP.getProjection(), "Osmarend");
 var mapCycleMap = new GMapType([tilesCycle], G_NORMAL_MAP.getProjection(), "CycleMap");

 //definicion de mapa incluyendo los tres tiles de OpenStreetMap

 var map           = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik, mapOsmarender,mapCycleMap] });

 //se añaden los controles de mapa del API de Google Maps
 map.addControl(new GLargeMapControl()); //control de desplazamiento y acercamiento de gran tamaño empleado en  Google Maps.
 map.addControl(new GMapTypeControl());  //Permite alternar entre los diferentes tipos de mapas (en este caso las tres tiles)
 map.addControl(new GOverviewMapControl()); //Este control nos permite mostrar una ventana de vista rápida contraible

//Situado el centro, las coordenadas de la Universidad de Alicante
 map.setCenter( new GLatLng(38.38575, -0.51486), 16);

 map.enableScrollWheelZoom();
 map.enableContinuousZoom();

 //Se definen como GLayers los servicios georeferenciados que quiero incluir

 var wikipedia = new GLayer("org.wikipedia.es");
 var panoramio = new GLayer("com.panoramio.all");
 var youtube = new GLayer("com.youtube.all");
 var webcam = new GLayer("com.google.webcams");

 map.addOverlay(wikipedia);
 map.addOverlay(panoramio);
 map.addOverlay(youtube);
 map.addOverlay(webcam);

 //En este caso como los servicios son un xml se añaden como GGeoXML(tanto el api de flickr como cualquier KML que quiera incluir lo debo definir as�)
 var geoXmlFlickr;
 geoXmlFlickr = new GGeoXml("http://api.flickr.com/services/feeds/geo/?tags=universidad+alicante");
 map.addOverlay(geoXmlFlickr);

//Ejemplo de introducción de un KML
 var tram = new GGeoXml("http://www.sigua.ua.es/web/utils/acceso/kml/TRAM4.kml");
 map.addOverlay(tram);
 }

Aqui se puede ver como se muestra en el mapa el KML importado

 </script>

 </head>

 <body onload="load()" onunload="GUnload()">
 <div>
 <div role="main">
 <div>
 <div id="map" style="width: 100%; height: 600px;"></div>

 </div>
 </div>
 </div>

El visor completo con todos los datos estaría accesible desde la siguiente URL:
http://www.gisandchips.org/demos/pepe/osm/test.html

Como digo, este mapa incluye tantos elementos que a veces es un poco extraño, pero es justo lo que pretendía, incluir muchos servicios en un mismo mapa.