Dic 072012
 
Artículo Javascript

( Read this post in english )

En otro artículo de la serie dedicada a Google maps hemos visto cómo añadir marcadores al mapa para señalar puntos concretos del mismo.

En ocasiones, lo que nos interesa es destacar una región del mapa. El API de Google maps también permite marcar sobre el mapa un área definida por un polígono.

Por último, si lo que queremos es marcar un trayecto, podemos hacerlo mediante una línea poligonal.

En este artículo comentamos cómo marcar áreas y trayectos sobre el mapa usando el API de Google Maps V3, con ejemplos de uso.

Polígonos

Para crear un polígono, se comienza creando un array javascript de elementos del tipo google.maps.LatLng. En el siguiente ejemplo se define un polígono de tres vértices que cubre el Triángulo de las Bermudas:

A continuación, creamos un objeto del tipo google.maps.Polygon, asignandole el array de puntos en el atributo “paths”, y el resto de propiedades de visualización deseadas: color y opacidad del borde y el fondo, etc:

Por último, asignamos el mapa en el que deseamos visualizar el objeto con una llamada a “setMap()”:

Areas con más de un polígono

Puede ocurrir que la región a señalar en el mapa sea más compleja:

– Si consta de dos o más áreas disjuntas

– Si en el interior de un área contiene “huecos” que no pertenecen a la región a señalar.

Para tratar el primer caso, creamos un array de polígonos y se lo asignamos al atributo “paths” del objeto Polygon:

El ejemplo de arriba genera un mapa con dos triángulos señalados en el mismo:

 

Para crear un agujero dentro de un polígono, ponemos en el array, a continuación del polígono contenedor, el polígono que define el agujero. Pero además, hay que asegurarse de que el sentido del recorrido de los puntos sea el contrario. Es decir, si los puntos del polígono contenedor están ordenados en el sentido de las agujas del reloj, los puntos del polígono “agujero” deben estar ordenados en sentido contrario al de las agujas del reloj.

Ejemplo:

Con esto se crea un triángulo con un agujero triangular:

 

Líneas poligonales

Una linea poligonal se crea de manera muy similar a un polígono, en forma de un array de puntos del tipo google.maps.LatLng. A continuación, se crea un objeto del tipo google.maps.Polyline, al que se le asigna el array como atributo “path”, y al que se le pueden asignar también el color, anchura y opacidad de la línea a trazar:

Con esto se dibuja sobre el mapa una línea que representa un plan de vuelo desde EEUU hasta Australia:

Referencias:

Artículos relacionados:

 Publicado por en 6:47 pm

 Deja un comentario

(requerido)

(requerido)