Dibujar líneas en mapas de Google

Como dibujar líneas o polígonos encima de un mapa de Google, a partir de unas coordenadas.

19/2/08 - 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

+ 1 manual relacionado
+ 2 categorias relacionadas
+ 1 comentario no revisado

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Ajax
+ Entrar en Google Maps

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba