Introducción a Google Maps APIv3 (parte 6): líneas y polígonos

En esta ocasión, vamos a añadir una línea o un polígono superpuesto a nuestro mapa creado con la API de Google Maps.

Definición de la línea o el polígono

En primer lugar, debemos definir las coordenadas de la línea o polígono. Para ello debemos crear un array (vector) de elementos del tipo «google.maps.LatLng», indicando para cada uno de ellos sus respectivas coordenadas. En el siguiente ejemplo, podemos ver la definición de un polígono de tres lados entre las ciudades de Barcelona, Reus y Manresa.

[codesyntax lang=»javascript»]

var poligono = [
		new google.maps.LatLng(41.3788696258852, 2.1752934374999313),
		new google.maps.LatLng(41.14763810202612, 1.1041264453124313),
		new google.maps.LatLng(41.72828039782993, 1.8237309374999313)
	];

[/codesyntax]

 

Estilo de la línea o el polígono

A continuación, debemos definir el estilo de la línea o, en el ejemplo que nos ocupa, del polígono. Para ello nos podemos valer de diferentes propiedades. Es importante que el valor del atributo «paths» sea el nombre de la variable en la que hemos almacenado nuestro array con todas las coordenas. Mediante el resto de propiedades que se muestran a continuación podemos establecer el color y grosor de la línea, así como del relleno.

[codesyntax lang=»javascript»]

miPoligono = new google.maps.Polygon({
	  paths: poligono,
	  strokeColor: "#FF0000",
	  strokeOpacity: 0.8,
	  strokeWeight: 3,
	  fillColor: "#FF0000",
	  fillOpacity: 0.4
	});

[/codesyntax]

 

Insertar el polígono en el mapa

Una vez definidos los puntos que formarán la línea o polígono y su estilo, sólo nos falta añadirlo al mapa. Para ello utilizaremos:

[codesyntax lang=»javascript»]

miPoligono.setMap(mapa);

[/codesyntax]

A continuación se muestra un ejemplo completo:

[codesyntax lang=»javascript»]

window.onload = function() {
	var poligono = [
		new google.maps.LatLng(41.3788696258852, 2.1752934374999313),
		new google.maps.LatLng(41.14763810202612, 1.1041264453124313),
		new google.maps.LatLng(41.72828039782993, 1.8237309374999313)
	];
	var mapDiv = document.getElementById('map');
	var catalunya = new google.maps.LatLng(41.652393,1.691895);
	var options = {
		center: catalunya,
		zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	miPoligono = new google.maps.Polygon({
	  paths: poligono,
	  strokeColor: "#FF0000",
	  strokeOpacity: 0.8,
	  strokeWeight: 3,
	  fillColor: "#FF0000",
	  fillOpacity: 0.4
	});

	var mapa = new google.maps.Map(mapDiv, options);
	miPoligono.setMap(mapa);
}

[/codesyntax]

El resultado sería el siguiente:

Si lo que queremos crear es una línea, bastará con definir los diferentes puntos por lo que deseamos que pase. En este caso, las propiedades que hacen referencia al color y opacidad del relleno no serán necesarias.