Seguimos estudiando la creación de mapas de Google con el API de Google Maps, en esta ocasión para mostrar el proceso de creación de líneas sobre mapas de Google. Las líneas se dibujan encima de los mapas y se muestran con una pequeña transparencia, para que se pueda ver lo que hay debajo de ellas.

Dibujar líneas o polígonos es un modo muy interesante de marcar elementos o caminos en el mapa y resulta muy sencillo. Sólo necesitamos conocer previamente unos cuantos conceptos sobre la creación de mapas, que ya vimos en artículos anteriores, en el manual: Manual del API de Google Maps.

Para ilustrar este ejemplo, vamos a crear una línea en un mapa de Google que va de Madrid a Barcelona. Podemos ver el ejemplo en marcha en una página aparte.

Clase GPolyline

Esta clase sirve para dibujar líneas o polígonos en un mapa. Intenta hacer el trabajo utilizando las características de dibujo con vectores de los navegadores y si no es posible superpone una imagen al mapa.

Para construir un polígono se necesitan varios parámetros:

• Array con los vértices de las líneas, que se indica con los distintos puntos
• El color de las líneas, que es un RGB en hexadecimal, como los que utilizamos para definir colores en HTML, comenzando por #. Ej: #ff8800.
• El ancho de las líneas, en pixels.
• La opacidad con un valor que va de cero a uno.
• Otras opciones.

El único parámetro que necesitamos indicar de manera obligada son los puntos de las líneas, los otros parámetros son opcionales.

Para indicar los puntos de los vértices, se utiliza la clase GLatLng, que sirve para crear objetos que tienen las dos coordenadas geográficas latitud y longitud. Por ejemplo, para definir los puntos donde están Madrid y Barcelona:

var madrid = new GLatLng(40.4165020, -3.702564);
var barcelona = new GLatLng(41.38878, 2.15898);

Ahora que tenemos los puntos de la línea a crear, podemos hacer la llamada al constructor del polyline:

var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);

Como vemos, se ha definido una línea con dos puntos, con color #0000dd que es un azul, con 6 pixels de ancho y 0.4 de opacidad.

Pintar la línea en el mapa con addOverlay

Para que esta línea quede dibujada en el mapa se utiliza el método de GMap2 llamado addOverlay() al que le pasamos por parámetro el polyline que habíamos construido.

map.addOverlay(polyline);

Todo el código

Este es el código completo para la configuración del mapa del ejemplo:

function load() {
   if (GBrowserIsCompatible()) {

      var map = new GMap2(document.getElementById("map"));   
      map.setCenter(new GLatLng(40.002,-4.12),5);
      
      var madrid = new GLatLng(40.4165020, -3.702564);
      var barcelona = new GLatLng(41.38878, 2.15898);
      
      var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);
      map.addOverlay(polyline);
   }
}

window.onload=load

Podemos ver el código completo del mapa accediendo al ejemplo y utilizando la funcionalidad del navegador de "Ver código fuente".

Ejemplo completo en marcha en http://www.guiarte.com/mapas-google/desarrolloweb/linea.php