Continuamos estudando a criação de mapas de Google com o API de Google Maps, nesta ocasião para mostrar o processo de criação de linhas sobre mapas de Google. As linhas se desenham em cima dos mapas e se mostram com uma pequena transparência, para que se possa ver o que há debaixo delas.

Desenhar linhas ou polígonos é um modo muito interessante de marcar elementos ou caminhos no mapa e é muito simples. Só necessitamos conhecer previamente alguns conceitos sobre a criação de mapas, que já vimos em artigos anteriores, no manual: Manual do API de Google Maps.

Para ilustrar este exemplo, vamos criar uma linha em um mapa de Google que vai de Madri a Barcelona. Podemos ver o exemplo em funcionamento em uma página à parte.

Classe GPolyline

Esta classe serve para desenhar linhas ou polígonos em um mapa. Tenta fazer o trabalho utilizando as características de desenho com vetores dos navegadores e se não for possível sobrepõe uma imagem ao mapa.

Para construir um polígono se necessitam vários parâmetros:

• Array com os vértices das linhas, que se indica com os distintos pontos.
• A cor das linhas, que é um RGB em hexadecimal, como os que utilizamos para definir cores em HTML, começando por #. Ex: #ff8800.
• A largura das linhas, em pixels.
• A opacidade com um valor que vai de zero a um.
• Outras opções.

O único parâmetro que necessitamos indicar de maneira obrigada são os pontos das linhas, os outros parâmetros são opcionais.

Para indicar os pontos dos vértices, se utiliza a classe GLatLng, que serve para criar objetos que têm as duas coordenadas geográficas latitude e longitude. Por exemplo, para definir os pontos onde estão Madri e Barcelona:

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

Agora que temos os pontos da línea a criar, podemos fazer a chamada ao construtor do polyline:

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

Como vemos, se definiu uma linha com dois pontos, com cor #0000dd que é um azul, com 6 pixels de largura e 0.4 de opacidade.

Pintar a linha no mapa com addOverlay

Para que esta linha fique desenhada no mapa se utiliza o método de GMap2 chamado addOverlay() ao que lhe passamos por parâmetro o polyline que havíamos construído.

map.addOverlay(polyline);

Todo o código

Este é o código completo para a configuração do mapa do exemplo:

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 o código completo do mapa acessando ao exemplo e utilizando a funcionalidade do navegador de "Ver código fonte".

Exemplo completo em funcionamento em http://www.guiarte.com/mapas-google/desarrolloweb/linea.php