Polígonos em mapas de Google

O API de Google Maps permite desenhar vários tipos de elementos para sobrepor sobre os mapas de Google. Em nosso manual sobre o desenvolvimento com o API de Google Maps já explicamos a maneira de colocar marcas e linhas. Agora é a vez dos polígonos.

Os polígonos em mapas de Google se colocam de maneira similar a como se fazem as linhas, indicando os pontos ou vértices, com suas correspondentes coordenadas de latitude e longitude. No caso dos polígonos, temos que indicar os pontos desde o primeiro até o último, sendo o último ponto o mesmo que o primeiro, para que se possa fechar o polígono.

A parte inovadora com respeito às linhas é que nos polígonos se pode indicar não só a cor da borda, como também a cor do preenchimento com a qual queremos pintar a parte interna do polígono.

A classe GPolygon é a encarregada de dar suporte à implementação de polígonos nos mapas. Para criar um polígono temos que utilizar o construtor da classe GPolygon, que recebe uma série de parâmetros para a configuração do mesmo. A instanciação de um polígono se realiza da seguinte maneira:

var objeto_poligono = new GPolygon([ponto1, ponto2, …, ponto1], cor_borda, tamanho_borda, opacidade_borda, cor_preenchimento, opacidade_preenchimento);

Vou listar e explicar os parâmetros do construtor de GPolygon para que fiquem claros:

Pontos dos vértices: Como se pode ver, pode se gerar um polígono com um número indeterminado de vértices. O único é que o percorrido de vértices tem que estar fechado, ou seja, começar e acabar no mesmo ponto, para que não se produzam comportamentos indefinidos na hora de pintar o polígono. Todos os pontos ou vértices têm que ser indicados com um objeto GLatLng, que se compõe das coordenadas de latitude e longitude.

Cor da borda: Uma cadeia com uma cor RGB em hexadecimal, tal como se definem em HTML.

Tamanho da borda: Um número inteiro, que é o número de pixels da borda.

Opacidade da borda: Um número entre 0 e 1. Quanto mais baixo, mais transparente e quanto mais alto mais opaco.

Cor_preenchimento: Um valor de tipo cadeia com a cor RGB em hexadecimal.

Opacidade do preenchimento: Também um valor entre 0 e 1, igual à opacidade da borda.

Para dar a ordem a um mapa de Google que desenha um polígono gerado se utiliza método addOverlay() do objeto mapa, da classe GMap2, de maneira similar a como fizemos ao desenhar linhas:

map.addOverlay(objeto_poligono);

Exemplo de criação de um polígono em um mapa de Google Maps

Agora vejamos um exemplo de criação de um polígono. Neste caso realizamos um cujos lados se sobrepõe à muralha de Ávila (Espanha) e cujo interior seria a cidade amuralhada. Primeiro, tivemos que obter e gerar os pontos (latitude e longitude, com a classe GLatLng) dos vértices da muralha:

var muralha1 = new GLatLng(40.65627360348711, -4.707534313201904);
var muralha2 = new GLatLng(40.65884555247438, -4.706525802612305);
var muralha3 = new GLatLng(40.658715329592404, -4.70139741897583);
var muralha4 = new GLatLng(40.658259547503505, -4.697213172912598);
var muralha5 = new GLatLng(40.656680564044166, -4.696569442749023);
var muralha6 = new GLatLng(40.65399457849209, -4.697320461273193);

Logo, criamos o polígono utilizando estes pontos e as configurações desejadas:

var polygon = new GPolygon([muralha1, muralha2, muralha3, muralha4, muralha5, muralha6, muralha1], “#669933”, 5, 0.7, “#996633”, 0.4);

Isto criará um polígono sobre os vértices tirados da muralha de Ávila, com cor de borda #669933, tamanho de borda 5 pixel, opacidade da borda 0.7 (mais para opaco), com cor do preenchimento #996633 e opacidade do preenchimento 0.4 (mais para transparente).

Por último, mostraríamos o polígono com addOverlay().

map.addOverlay(polygon);

Podemos ver o exemplo em funcionamento em: https://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php

Recomendamos ver o código fonte deste exemplo. Abra o exemplo e utilize o menu “Exibir – Código-fonte”, para ver o código completo da criação do mapa de Google com o polígono.