Polígono dentro de un mapa creado con Google Maps
- Informática

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

Introducción

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.

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

 

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.

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

 

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:

miPoligono.setMap(mapa);

A continuación se muestra un ejemplo completo:

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

El resultado sería el siguiente:

Polígono dentro de un mapa creado con Google Maps
En la imagen se puede observar el resultado del código anterior.

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.

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

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

  1. hola una consulta, hay forma de jalas las coordenadas de una base de datos y así generar el polígono sin la necesidad de especificar cada coordenada en un array

  2. Hola, gran aporte.. quisiera poder dibujar sectores de una Granja directamente sobre el Mapa, y que luego de completar el trazado de las lineas pueda almacenar el polígono en una base de datos, con su respectiva descripción y demás.

    Gracias por su respuesta.

    1. Por supuesto que luego del Registro pueda visualizar todos los polígonos guardados en la Base de Datos.. Actualmente estoy desarrollando un Sistema en PHP, jquery, ajax y demás, y quisiera que el registro de sectores de la Granja sea mas interactivo, sencillo y visual..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.