Ventanas de información con pestañas en Google Maps

Vamos a ver cómo crear cajas con información de las típicas de Google Maps, pero que además incluyan una interfaz de "tabs", mediante las cuales podremos ver varios contenidos en una misma caja, pero clasificados en distintas pestañas. Veremos las clases de Programación Orientada a Objetos que dispone el API de los Mapas de Google para generar estas pestañas y aprenderemos a utilizarlas.

En el API de Google Maps existen clases para hacer muchas cosas y una de ellas es la creación de ventanas de información, que ya hemos visto por ejemplo en el artículo Mostrar marcas y ventanas de información y los siguientes. Ahora veremos como hacer que esas ventanas de información contengan contenidos organizados en pestañas.

En este artículo de DesarrolloWeb.com vamos a colocar varias marcas y haciendo clic se verán las ventanas de información con las pestañas. Para hacerse una idea exacta, podemos ver el ejemplo que vamos a explicar en una ventana aparte.

Crear una marca

Empecemos por crear una marca en un mapa de Google. Algo que ya hemos realizado repetidas veces y de distintas maneras a lo largo del Manual del API de mapas de Google.

//Creo un punto para localizar la marca
var puntoMarca1 = new GLatLng(40.41689826118782,-3.7034815549850464);
//creo la marca sobre el punto generado antes
var marca1 = new GMarker(puntoMarca1);
//coloco la marca en el mapa
map.addOverlay(marca1);

Evento a la marca para actuar cuando se hace clic sobre ella

El siguiente paso es crear un evento clic sobre la marca, de manera que podamos hacer cosas cuando se hace clic sobre ella. En concreto deberemos abrir una ventana de información con pestañas.

GEvent.addListener(marca1, "click", function (){
//Aquí el código para crear la ventana con pestañas.
});

Con el código anterior se añade un evento "click" sobre la marca "marca1" que habíamos creado antes.

Crear una ventana con pestañas

Llegamos a la parte que nos interesa: crear la ventana con las distintas "tabs". Y para ello las marcas tienen un método con nombre openInfoWindowTabsHtml(). Este método crea una marca con pestañas y para ello necesita que le pasemos un array con todas las "tabs" que debe mostrar. Estas pestañas debemos generarlas antes, por medio de objetos de la clase GInfoWindowTab.

Así pues, crearemos primero las distintas pestañas y luego haremos la caja de información, pasando como parámetro esas pestañas creadas. Para hacer las pestañas tengo que instanciar objetos de la clase GinfoWindowTab, cuyo constructor recibe dos parámetros. El primero un string con el nombre de la pestaña y el segundo un string con el código HTML que tiene que mostrarse cuando se active esa pestaña.

//creo las pestañas
var pestana1 = new GInfoWindowTab("Etiqueta1","<div style='width: 300px;'>Este es el texto de la etiqueta 1</div>");
var pestana2 = new GInfoWindowTab("Etiq","<div style='width: 300px;'>Ahora estoy en la 2");
var pestana3 = new GInfoWindowTab("Otra","<div style='width: 300px;'><b>Tercera pestaña:</b><br>Colocaré otros contenidos para ver lo que pasa.");

//creo y muestro la ventana con pestañas sobre la marca
marca1.openInfoWindowTabsHtml([pestana1, pestana2, pestana3]);

En el código anterior vemos como se instancian diferentes pestañas y luego como se envían esas pestañas creadas, en un array, como parámetro del método openInfoWindowTabsHtml(), que será el encargado de crear toda la estructura de las pestañas.

Es importante señalar que podemos colocar tantas pestañas como deseemos en una ventana de información, pero si colocamos más de 2, el tamaño por defecto de las ventanas de información no será suficiente para que quepan todas las pestañas y se descuadrará el diseño. La solución es tan simple como colocar un ancho en los contenidos de la ventana de información, para que se haga lo suficientemente grande como para que quepan las pestañas.

Función para crear una marca con ventana de información con pestañas

Para simplificar las cosas en nuestros scripts podríamos hacernos una función como esta, que se encarga de crear una marca y todo el sistema de pestañas, a través de una serie de parámetros que necesitaremos:

• Punto donde colocar la marca
• Array con todos los textos de etiquetas de las pestañas
• Array con todos los HTML del contenido a mostrar con cada pestaña

function crearMarcaPestanas(punto, arrayEtiquetas, arrayContenidos) {
var marca = new GMarker(punto);
var arrayPestanas = new Array();
var anchuraPestanas = arrayEtiquetas.length * 90;
for (i=0; i < arrayEtiquetas.length; i++){
arrayPestanas[i] = new GInfoWindowTab(arrayEtiquetas[i], "<div style='width: " + anchuraPestanas + "px;'>" + arrayContenidos[i] + "</div>");
}
GEvent.addListener(marca, "click", function() {
marca.openInfoWindowTabsHtml(arrayPestanas);
});
return marca;
}

En esta función primero creamos la marca. Luego creamos un array donde guardaremos las distintas pestañas. Para generar las pestañas hacemos un bucle for para recorrer los arrays recibidos por parámetro arrayEtiquetas y arrayContenidos e ir generando con sus datos las pestañas como objetos de la clase GInfoWindowTab.

Por último se añade un evento clic a la marca, en el que se genera y muestra la ventana de info con las pestañas, a partir del mencionado método openInfoWindowTabsHtml() de las marcas, pasándole el array de pestañas generadas antes.

Esta función se encarga de todo menos de colocar la marca sobre el mapa. En realidad sólo la genera y añade el evento clic, para mostrar una caja de información con pestañas, con los contenidos pasados por parámetro. Una vez creada la marca la devuelve (como return de la función), de modo que la tendríamos que añadir con el método addOverlay() del mapa.

Por ejemplo, podríamos utilizar un código como este para crear la marca y colocarla en el mapa de Google:

map.addOverlay(crearMarcaPestanas(new GLatLng(45.822,0.850464), ["Uno", "Dos", "Tres", "Cuatro"], ["Datos de 1", "Datos de 2", "Datos de 3", "Datos de 4"]));

Todo el código junto de las marcas y ventanas con pestañas

Podemos ver todo el código Javascript con el API de Google Maps para hacer los ejemplos de este artículo:

function load() {
if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 4);

//Creo y muestro una marca
var puntoMarca1 = new GLatLng(40.41689826118782,-3.7034815549850464);
var marca1 = new GMarker(puntoMarca1);
map.addOverlay(marca1);
//añado un evento a la marca para que reaccione al clic
GEvent.addListener(marca1, "click", function (){
//creo las pestañas
var pestana1 = new GInfoWindowTab("Etiqueta1","<div style='width: 300px;'>Este es el texto de la etiqueta 1</div>");
var pestana2 = new GInfoWindowTab("Etiq","<div style='width: 300px;'>Ahora estoy en la 2");
var pestana3 = new GInfoWindowTab("Otra","<div style='width: 300px;'><b>Tercera pestaña:</b><br>Colocaré otros contenidos para ver lo que pasa.");
//creo y muestro la ventana con pestañas sobre la marca
marca1.openInfoWindowTabsHtml([pestana1, pestana2, pestana3]);

});


function crearMarcaPestanas(punto,arrayEtiquetas, arrayContenidos) {
var marca = new GMarker(punto);
var arrayPestanas = new Array();
var anchuraPestanas = arrayEtiquetas.length * 90;
for (i=0; i < arrayEtiquetas.length; i++){
arrayPestanas[i] = new GInfoWindowTab(arrayEtiquetas[i], "<div style='width: " + anchuraPestanas + "px;'>" + arrayContenidos[i] + "</div>");
}
GEvent.addListener(marca, "click", function() {
marca.openInfoWindowTabsHtml(arrayPestanas);
});
return marca;
}

map.addOverlay(crearMarcaPestanas(new GLatLng(39.416898,-9.034814), ["GEOGRAF.", "HISTORIA"], ["Datos de Geografía de este elemento.", "Datos de la historia sobre esta marca"]));
map.addOverlay(crearMarcaPestanas(new GLatLng(45.822,0.850464), ["Uno", "Dos", "Tres", "Cuatro"], ["Datos de 1", "Datos de 2", "Datos de 3", "Datos de 4"]));

}
}
window.onload=load

Por último, dejamos un enlace para ver el ejemplo en una ventana aparte.