El API de Google Maps permite dibujar varios tipos de elementos para superponer sobre los mapas de Google. En nuestro manual sobre el desarrollo con el API de Google Maps ya explicamos la manera de colocar marcas y líneas. Ahora le toca el turno a los polígonos.

Los polígonos en mapas de Google se colocan de manera similar a como se hacen las líneas, indicando los puntos o vértices, con sus correspondientes coordenadas de latitud y longitud. En el caso de los polígonos, tenemos que indicar los puntos desde el primero hasta el último, siendo el último punto el mismo que el primero, para que se pueda cerrar el polígono.

La parte novedosa con respecto a las líneas es que en los polígonos se puede indicar no sólo el color del borde, sino también el color del relleno con el que queremos pintar la parte interna del polígono.

La clase GPolygon es la encargada de dar soporte a la implementación de polígonos en los mapas. Para crear un polígono tenemos que utilizar el constructor de la clase GPolygon, que recibe una serie de parámetros para la configuración del mismo. La instanciación de un polígono se realiza de la siguiente manera:

var objeto_poligono = new GPolygon([punto1, punto2, …, punto1], color_borde, tamaño_borde, opacidad_borde, color_relleno, opacidad_relleno);

Voy a listar y explicar los parámetros del constructor de GPolygon para que queden claros:

Puntos de los vértices: Como se puede ver, puede generarse un polígono con un número indeterminado de vértices. Lo único es que el recorrido de vértices tiene que estar cerrado, es decir, empezar y acabar en el mismo punto, para que no se produzcan comportamientos indefinidos a la hora de pintar el polígono. Todos los puntos o vértices tienen que ser indicados con un objeto GLatLng, que se compone de las coordenadas de latitud y longitud.

Color del borde: Una cadena con un color RGB en hexadecimal, tal como de definen en HTML.

Tamaño del borde: Un número entero, que es el número de píxeles del borde.

Opacidad del borde: Un número entre 0 y 1. Cuanto más bajo, más transparente y cuanto más alto más opaco.

Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal.

Opacidad del relleno: También un valor entre 0 y 1, igual que la opacidad del borde.

Para dar la orden a un mapa de Google que dibuje un polígono generado se utiliza el método addOverlay() del objeto mapa, de la clase GMap2, de manera similar a como hicimos al dibujar líneas:

map.addOverlay(objeto_poligono);

Ejemplo de creación de un polígono en un mapa de Google Maps

Ahora veamos un ejemplo de creación de un polígono. En este caso hemos realizado uno cuyos lados se superponen a la muralla de Ávila y cuyo interior sería la ciudad amurallada. Primero hemos tenido que obtener y generar los puntos (latitud y longitud, con la clase GLatLng) de los vértices de la muralla:

var muralla1 = new GLatLng(40.65627360348711, -4.707534313201904);
var muralla2 = new GLatLng(40.65884555247438, -4.706525802612305);
var muralla3 = new GLatLng(40.658715329592404, -4.70139741897583);
var muralla4 = new GLatLng(40.658259547503505, -4.697213172912598);
var muralla5 = new GLatLng(40.656680564044166, -4.696569442749023);
var muralla6 = new GLatLng(40.65399457849209, -4.697320461273193);

Luego creamos el polígono utilizando estos puntos y las configuraciones deseadas:

var polygon = new GPolygon([muralla1, muralla2, muralla3, muralla4, muralla5, muralla6, muralla1], "#669933", 5, 0.7, "#996633", 0.4);

Esto creará un polígono sobre los vértices sacados de la muralla de Ávila, con color de borde #669933, tamaño de borde 5 píxel, opacidad del borde 0.7 (tirando a opaco), con color del relleno #996633 y opacidad del relleno 0.4 (tirando más a transparente).

Por último, mostraríamos el polígono con addOverlay().

map.addOverlay(polygon);

Podemos ver el ejemplo en marcha en: http://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php

Recomendamos ver el código fuente de este ejemplo Abre el ejemplo y utiliza el menú "Ver - Código fuente", para ver el código completo de la creación del mapa de Google con el polígono.