Insertando un Carrusel de Mapas en Blogger

En estos primeros días de acercamiento y pruebas con Blogger, he estado probando varios temas, configuraciones, gadgets, etc. Después de dar varias vueltas, descubrí el gadget HTML/Javascript, que da la posibilidad de incluir en uno de los gadgets de la página código propio del usuario. Este gadgets me dio una idea, intentar integrar los mapas proporcionados por Mapstraction, la librería de abstracción de mapas con la que he realizado otros proyectos.

Mapstraction es una librería que ofrece un interfaz común para diferentes API de visores de mapas basados en JavaScript. De esta forma pretende facilitar el cambio de unos a otros haciéndolo lo más sencillo posible.Mediante esta librería, los desarrolladores pueden implementar sus aplicaciones una vez y, posteriormente cambiar con facilidad de un proveedor de mapas a otro según las necesidades de los proyectos, licencias o cualquier otra razón.

Una primera prueba fue llevar a cabo el gadget "¿Dónde estoy?", que se puede ver en esta misma página. En él, incluyo un pequeño mapa en el que muestro la localización de mi domidilio actual en Valladolid. Sin embargo, con ese gadget no se sabía si había utilizado Mapstraction para llevarlo a cabo, o simplemente el API del proveedor utilizado. En ese momento se me ocurrió la idea de realizar un "carrusel" en el que mostrar esa misma localización, pero intercambiando continuamente el proveedor de mapas utilizado. De esta forma, se puede comprobar que con un único código fuente se pueden crear mapas de diferentes proveedores.

El resultado se puede ver en esta misma página, en el gadget que he llamado carrusel y en el que se muestra la misma información geográfica en un mapa de Mapstraction, sobre el que se intercambian los proveedores sin que eso cause ningún problema. Este gadget puede resultar atractivo a otros usuarios y puede que quieran hacer algo parecido, así que haré un breve tutorial sobre como poder integrarlo en blogger.

En primer lugar, seleccionar ir a la vista de diseño del blog e insertar un gadget de tipo HTML/Javascript.

A continuación, en el campo de texto que aparece insertar un código similar a este:

<!-- Implementación de un carrusel de mapas en Blogger --!>
<!-- Creado por plopesc 03/2010--!>
<!-- Script de la librería IDELabMapstraction que permite hacer el Carrusel --!>
<script src="http://mvn.idelab.uva.es/idelabmapstraction/downloads/1.0/idelabmapstraction.js" type="text/javascript"></script>
<!-- Scripts de los proveedores de mapas a incluir --!>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2" type="text/javascript"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=******Introduce tu clave aquí******" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=******Introduce tu clave aquí******" type="text/javascript"></script>
<!-- Capas para incluir los mapas --!>
<!-- La del primer proveedor a mostrar debve tener la propiedad "display:block", el resto "display:none" --!>
<div id="mapstraction-openlayers" style="width:100%;height:300px;position:relative;display:block;"></div>
<div id="mapstraction-google" style="width:100%;height:300px;position:relative;display:none;"></div>
<div id="mapstraction-yahoo" style="width:100%;height:300px;position:relative;display:none;"></div>
<div id="mapstraction-microsoft" style="width:100%;height:300px;position:relative;display:none;"></div>
<script type="text/javascript">
var carrousel;
function time(index, delay){
if (index >= providers.length) index = index%providers.length;
var newIndex = index+1
window.setTimeout('carrousel.swap("mapstraction-'+providers[index]+'","'+providers[index]+'");time('+newIndex+','+delay+')',delay);
}
function map_carrousel(lat, lon, zoom,providers, delay){
carrousel = new mxn.MapstractionInteractive('mapstraction-'+providers[0],providers[0]);
var carrouselPoint = new mxn.LatLonPoint(lat, lon);
carrousel.setCenterAndZoom(carrouselPoint,zoom);
carrousel.addMarker(new mxn.Marker(carrouselPoint));
time(1,delay);
}

var providers = ['openlayers','google','yahoo',microsoft]; //Array con los nombres de los proveedores
var lat = 40.5;     //Latitud del punto a mostrar
var lon = -3.5      //Longitud del punto a mostrar
var zoom = 5       //Nivel de zoom deseado
var delay = 3000   //Periodo durante el que se muestra cada mapa (en ms)
map_carrousel(lat,lon,5,providers,delay);
</script>

Una vez insertado, modificar los parámetros necesarios para crear el mapa propio:

• Añadir o eliminar alguno de los proveedores que aparecen
• Incluir las claves propias de los proveedores de mapas en los lugares indicados
• Introducir los valores propios de latitud y longitud del marcador a mostrar y el nivel de zoom
• Introducir el periodo tras el cual se sustituirá un mapa por el siguiente
  

Finalmente, aceptar y situar el gadget donde desee el usuario.

Siguiendo estos sencillos pasos será posible incluir este original y vistoso gadget en nuestro blog. Esta versión inicial es bastante sencilla, pero con un poco más de trabajo seguro que se pueden conseguir resultados todavía más interesantes.

Espero que este breve tutorial os haya parecido interesante y que no tengáis ningún problema a la hora de añadir un carrusel de mapas en vuestro blog.