Google Maps: congiungere punti con una linea

Proviamo ad aggiungere alla nostra solita Google Maps alcune coordina te e congiungerle fra di loro con una linea, come esempio immagineremo di disegnare sulla mappa di Milano un tratto della metropolitana gialle (linea 3).

Abbiamo due preprequisiti da soddisfare: avere a disposizione la Google Maps, e in secondo luogo avere le coordinate di tutti i punti dove vogliamo far passare la nostra linea.

Per tanto come prima cosa creeremo un array con tuttel le posizioni che ci interessano:

var lineagialla = [
new google.maps.LatLng(45.492405,9.192531), //zara
new google.maps.LatLng(45.489502,9.200706), //sondrio
new google.maps.LatLng(45.485124,9.203035), //centrale
new google.maps.LatLng(45.479031,9.197123), //repubblica
new google.maps.LatLng(45.475427,9.194232), //turati
new google.maps.LatLng(45.470202,9.192483), //montenapoleone
new google.maps.LatLng(45.464461,9.189221), //duomo
new google.maps.LatLng(45.460748,9.188079), //missori
new google.maps.LatLng(45.456428,9.194999), //crocetta
new google.maps.LatLng(45.451781,9.202863), //portaromana
new google.maps.LatLng(45.446809,9.210395), //lodi
new google.maps.LatLng(45.442406,9.218581)  //brenta
];

In secondo luogo andremo a congiungere questi punti con le seguenti istruzioni:

var metro3 = new google.maps.Polyline({
path: lineagialla,
strokeColor: “#FFFF00″,
strokeOpacity: 1.0,
strokeWeight: 4
});

metro3.setMap(map);

Dove path sarà il nostro array contenente le coordinate, strokeColor il colore della linea e poi definiamo l’opacità e lo spessore.

A questo punto non resta che aggiungere l’informazione alla mappa.

Ecco l’esempio