Para desarrollar alguna funcionalidad adicional de los polígonos en los mapas de Google vamos a programar un añadido al script que crea un polígono, que vimos en el artículo anterior, para ocultar y mostrar el polígono por respuesta a un evento de usuario.

Esta funcionalidad de mostrar y ocultar polígonos es común a las distintas overlays que hemos tratado con anterioridad en el manual de mapas de Google (API de Google Maps).

El ejercicio se trata de colocar una marca y un polígono en un mapa de Google. Al pulsar la marca se ocultará el polígono y al volverla a pulsar se mostrará de nuevo, y así sucesivamente. Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google Maps.

Como hemos dicho, en el artículo anterior vimos como colocar un polígono en un mapa de Google. La única diferencia con este caso es que hemos definido la variable donde vamos a colocar el objeto polígono, de la clase GPolygon, como global a toda la página. Esto es porque este objeto polygon lo tendremos que acceder desde otras funciones para mostrarlo u ocultarlo y si no está como variable global será imposible referenciarlo. (Para crear una variable glogal basta con declararla fuera de ninguna función, mira el código fuente del ejercicio terminado para ver cómo hacerlo.)

Hemos creado también, como decíamos, una marca:

var punto_marca = new GPoint (-4.702, 40.6570);
var marca = new GMarker(punto_marca);
map.addOverlay(marca);

Luego, tenemos que crear el evento "click" a la marca, para que cuando se hace clic sobre ella se llame a una función que se encargue de mostrar u ocultar el polígono. Con el API de Google Maps se define un evento de la siguiente manera:

GEvent.addListener(marca, "click", ocultar_mostrar_poligono);

Esto añade el escuchador de evento "click" asociado al objeto contenido en la variable marca. Cuando y cuando se detecte el evento se ejecuta la función ocultar_mostrar_poligono(). Por decirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar la función ocultar_mostrar_poligono() cuando se produzca.

Nos quedaría ver el código de la función que muestra u oculta el polígono. Esta función hace uso de la variable global donde hemos almacenado el objeto polígono, para acceder a los métodos de dicho objeto.

function ocultar_mostrar_poligono(){
   if (polygon.isHidden()){
      //alert("Estaba oculto");
      polygon.show();
   }else{
      //alert("Estaba mostrandose");
      polygon.hide();
   }
}

Lo primero que se hace es ver si el poligono esta o no oculto, con el método isHidden(), con polygon.isHidden(), que devuelve true en caso que esté oculto y false en caso que esté mostrándose.

En caso de estar oculto, llamamos al método que lo muestra, con polygon.show().

En caso que estuviera visualmente activo, llamamos al método para ocultarlo, con polygon.hide().

Y no hay más misterios, que no hayamos visto con anterioridad en el manual del API de Google Maps.

Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. Observar su código fuente para obtener más información.