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 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.

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.

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.

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.
Nota: En el código anterior nosotros colocamos como contenido HTML de las pestañas un DIV con el atributo style='width: 300px;'. Este tamaño para los contenidos de las pestañas era necesario para que las cajas de información tuvieran anchura suficiente para que cupiesen arriba las tres pestañas. Tenemos que reservar un espacio aproximado de 90 píxeles de anchura por cada pestaña.

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

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:

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:

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