Esta funcionalidade de mostrar e ocultar polígonos é comum às distintas overlays que tratamos anteriormente no manual de mapas de Google (API de Google Maps).
O exercício trata de colocar uma marca e um polígono em um mapa de Google. Ao clicar a marca se ocultará o polígono e ao voltar a clicar se mostrará de novo, e assim sucessivamente. Podemos ver o exemplo em funcionamento para entender bem o objetivo deste manual de Google Maps.
Como dissemos, no artigo anterior vimos como colocar um polígono em um mapa de Google. A única diferença com este caso é que definimos a variável onde vamos colocar o objeto polígono, da classe GPolygon, como global a toda a página. Isto é porque teremos que acessar este objeto polygon através de outras funções para mostrá-lo ou ocultá-lo e se não estiver como variável global será impossível referenciá-lo. (Para criar uma variável global basta declará-la fora de qualquer função, olhe o código fonte do exercício terminado para ver como fazê-lo.)
Criamos também, como dizíamos uma marca:
var ponto_marca = new GPoint (-4.702, 40.6570);
var marca = new GMarker(ponto_marca);
map.addOverlay(marca);
Logo, temos que criar o evento "click" à marca, para que quando se clique sobre ela se chame uma função que se encarregue de mostrar ou ocultar o polígono. Com o API de Google Maps se define um evento da seguinte maneira:
GEvent.addListener(marca, "click", ocultar_mostrar_poligono);
Isto adiciona o escutador de evento "click" associado ao objeto contido na variável marca. Quando se detecte o evento se executa a função ocultar_mostrar_poligono(). Com outras palavras, definimos um evento click sobre uma marca, para executar a função ocultar_mostrar_poligono() quando se produza.
Agora nos faltaria ver o código da função que mostra ou oculta o polígono. Esta função faz uso da variável global onde armazenamos o objeto polígono, para acessar aos métodos de tal objeto.
function ocultar_mostrar_poligono(){
if (polygon.isHidden()){
//alert("Estava oculto");
polygon.show();
}else{
//alert("Estava se mostrando");
polygon.hide();
}
}
O primeiro que se faz é ver se o polígono está ou não oculto, com o método isHidden(), com polygon.isHidden(), que devolve true no caso em que esteja oculto e false no caso em que esteja se mostrando.
No caso de estar oculto, chamamos ao método que o mostra, com polygon.show().
No caso de estar visualmente ativo, chamamos ao método para ocultá-lo, com polygon.hide().
E não há mais mistérios que não tenhamos visto anteriormente no manual do API de Google Maps.
Deixo novamente o link para ver o exemplo em funcionamento em uma janela à parte. Observar seu código fonte para obter mais informação.
