Para ello vamos a utilizar la clase GPolygon, del API de Google Maps, que nos permite dibujar un polígono dadas una serie de coordenadas. Los polígonos contienen una línea de contorno y además se les puede aplicar color de relleno. Así pues, los utilizaremos para rellenar de color la superficie de los países y pintar una línea que rodea la silueta del país.

Los polígonos en mapas de Google se colocan indicando los puntos o vértices, con sus correspondientes coordenadas de latitud y longitud.

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);

Se destacan los siguientes puntos:

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.

CountryPoints consiste básicamente en un archivo con código Javascript donde se declaran una serie de arrays con puntos geográficos, basados en latitudes y longitudes, para generar las siluetas de cada país.

Para ilustrar la forma de este archivo de puntos, vendrá bien mostrar aquí un extracto de los puntos de varios países:

//primero se declara un objetovar country = {};

//luego se definen propiedades con las coordenadas para cada país //se utilizan códigos de dos letras para cada país

country.GU = {

   desc: 'GUAM',  coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new

GLatLng(13.65229, 144.8761), new GLatLng(13.235, 144.7094)]]};

country.PT = {    desc: 'PORTUGAL‘,   coord: [ [new GLatLng(37.25319, -7.431854), new GLatLng(37.00889, -7.897779), new

GLatLng(37.02631, -8.9892369), new GLatLng(38.71722, - 9.118473)], [new GLatLng(37.70555, -25.45611), new GLatLng(37.88389, -25.85417), new GLatLng(37.70555, -25.45611)], [new GLatLng(32.6375, -

16.94361), new GLatLng(32.6375, -16.94361)]]   };

Así pues, para crear los polígonos de un país,debemos:

1) Incluir el array con los puntos de los países.

Para ello tendremos que incluir un código Javascript externo, que está en el proyecto CountryPoints de Google Code. (podemos incluirlo desde el servidor de Google Code o directamente descargarlo y subirlo a nuestro espacio de alojamiento.

<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script

2) Extraigo todos los puntos definidos para el país:

var coordenadas_portugal = country.PT.coord; (Si el país fuese portugal)

Los códigos de países de dos letras son por ejemplo PT para portugal, ES para España y BR para Brasil... Estos códigos están normalizados según normativa ISO 3166-1.

3) Recorrer las coordenadas para crear los polígonos

Con un bucle recorro los grupos de coordenadas para crear cada uno de los polígonos. (Porque debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los territorios separados del país) .

for (i=0; i<coordenadas_portugal.length; i++){   map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));}

<script src="http://maps.google.com/maps?file=api&v=2&key=tu_lleva_api_google_maps"type="text/javascript"></script><script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[function load() {   if (GBrowserIsCompatible()) {      var map = new GMap2(document.getElementById("map"));         map.setCenter(new GLatLng(39.41,-3.017),5);      map.addControl(new GMapTypeControl());      map.addControl(new GSmallZoomControl());            //creo los polígonos de España      var coordenadas_espana = country.ES.coord;      for (i=0; i<coordenadas_espana.length; i++){         map.addOverlay(new GPolygon(coordenadas_espana[i],"#dd6600", 2, 0.7, "#993300", 0.4));      }            //creo los polígonos de portugal      var coordenadas_portugal = country.PT.coord;      for (i=0; i<coordenadas_portugal.length; i++){         map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));      }         //creo los polígonos de francia      var coordenadas_francia = country.FR.coord;      for (i=0; i<coordenadas_francia.length; i++){         map.addOverlay(new GPolygon(coordenadas_francia[i],"#000099", 2, 0.7, "#000099", 0.4));      }            //creo los polígonos de Marruecos      var coordenadas_marruecos = country.MA.coord;      for (i=0; i<coordenadas_francia.length; i++){         map.addOverlay(new GPolygon(coordenadas_marruecos[i],"#990000", 2, 0.7, "#990000", 0.4));      }  }}window.onload=load//]]></script>

Gracias

Yadira Torres Aguilar