Eventos y polígonos en Google Maps

  • Por
Control de polígonos de mapas de google con respuesta a eventos del usuario, en el API de Google Maps.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jorge

16/6/2011
Y si quiero marcar cada vez que hago clic en lugar de, establecer una marca predeterminada?
tengo el código para marcar el mapa al escuchar evento clic y para generar un poligono, sin embargo no funcionan los dos, solo se visualizan el poligono pero no puedo marcar en el mapa. Muchas gracias
Mi código:
function load() {
if (GBrowserIsCompatible())
{
// Iniciamos el mapa
map = new GMap2(document.getElementById("map"));
//polgono.....
//marcas:
GEvent.addListener(map, "click",
function(marcador, punto)
{
if(marcador)
{
null;
}//fin if
else
{
map.clearOverlays();
var mark = new GMarker(punto);
map.addOverlay(mark);
document.form_mapa.coordenadas.value = punto.y+","+punto.x;
}//fin else
});

}
}
...

Maikel Almarales Leyva

17/5/2016
Importante
Si alguien me pudiera descir como manego los vertices que tengo dentro del poligono.

Necesito sacar las cordenadas pero de cada vértices.