Google maps: style per una distanza tra 2 punti

[orphenix]

salve a tutti......

premetto la mia conoscenza su javascript e limita a poco.... pero non nulla conosco anche le librerie jquery.
Avrei bisogno di un aiuto seguendo alcune guide su internet sono riuscito a creare una pagina html che calcola la distanza tra 2 punti e colorando il percorso piu breve tra questi 2 punti seguendo le strade, come risultato ho una soluzione simile all'articolo scritto qui su html.it cioe questo:
http://www.html.it/articoli/3242/esempi/directions.html

molto simile devo dire, ora pero dovrei cambiare il colorare della linea blu in un altro colore esempio rosso..... poiche dovrei creare un metodo che calcola la distanz tra molti punti pero le tratte devono essere colorate in modo diverso. Per spiegarmi bene preso 3 punti x,y e z dove ognua e una coordinata devo calcolar ela distanza tra, X e Y e colorare il loro percorso di mapsroad di rosso e poi tra Y e Ze colorarlo di giallo.... non posso usare gli oggeti polygon perche a me servono le tratte stradali tra questi punti.

Sono accetti qualsiasi suggerimenti anche metodi alternativi e non usare maps road, destritto nell'articolo

[Vindav]

per cambiare il colore ad un percorso ti basta passare in input al DirectionsRendered un oggetto del tipo:

var rendererOptions = {
      polylineOptions:{strokeColor:'red'}
    }

[orphenix]

grazie mille funziona pero ho fatto una modifica passando direttamente l'oggetto in questo modo:

 directionsService.route(
          directionsRequest,
          function(response, status)
          {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response,
                polylineOptions:{strokeColor:'red'}
              });
            }
            else
              $("#error").append("Unable to retrieve your route
");
          }
        );

[orphenix]

qualcuno sa dirmi come aggiungere molti percorsi su una stessa mappa.

esempio voglio caricare una mappa che evidenzia il percorso tra roma-milano , e poi aggiungere sulla mappa un secondo percorso esempio napoli-bari ecc... cioe aggiungere molti percorsi su una stessa mappa....

ho provato questo codice
http://stackoverflow.com/questions/6...ute-google-map
ho provato ad implementarlo ma non mi funziona..... ho cercato di modificarlo e fare un merge tra questo codice e quello che ho visto sull'articolo postato nel primo messaggio.... ma non funziona.

qualsiasi idea e buon accetta anche una guida dove spiega come crearlo.

Tnks.

[Vindav]

var routes = [{origin:..., destination:...}, {origin:..., destination:...}, {origin:..., destination:..}];
    for(i=0;i<routes.length;i++){
      var request = {
          origin:routes[i].origin, 
          destination:routes[i].destination,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      
      directionsService.route(request, function(response, status) {
        var directionsDisplay = new google.maps.DirectionsRenderer();
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }

Nel codice suggerito, nel link da te postato, c'è un errore, non prenderlo in considerazione.

[orphenix]

e perfetto grazie mille... grazie a te ora sono riuscito a capire bene il funzionamento del codice e ad implementarlo nel mio ora lo script funziona perfettamente ^^.... grazie mille......

avrei solo un piccolo problema che non riesco a capire come mai, perche google map fa in questo modo.

     for(i=0;i<routes.length;i++){
            var request = {
                origin:routes[i].origin, 
                destination:routes[i].destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC
            };
        
            var polylineOptions={};
            polylineOptions.strokeColor=routes[i].color;

        directionsService.route(
        		request,
          function(response, status)
          {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response,
                polylineOptions: polylineOptions
                
              });
            }
            else
              $("#error").append("Impossibile recuperare il percorso
");
          }
        );
      }
  }

polylineOptions.strokeColor=routes[i].color;
ogni linea dovrebbe essere un colore diverso che la setto io casualmente con un funzione.... non riesco a capire come mai pero , sulla mappa le linee sono tutto dello stesso colore o meglio sono solo dell'ultimo colore che gli passo esempio se l'ultimo e red ... tutte le linee sono red.... sapete dirmi come fare il modo che ogni linee sia di un colore diverso?

[Vindav]

     for(i=0;i<routes.length;i++){
            var request = {
                origin:routes[i].origin, 
                destination:routes[i].destination,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC
            };
        
            var polylineOptions={};
            polylineOptions.strokeColor=routes[i].color;

            directionsService.route(request, routeCallback(polylineOptions));
      }

function routeCallback(polylineOptions){
   return function(response, status) {
            if (status == google.maps.DirectionsStatus.OK)
            {
              new google.maps.DirectionsRenderer({
                map: mapObject,
                directions: response,
                polylineOptions: polylineOptions
              });
            }
            else $("#error").append("Impossibile recuperare il percorso
");
    }
}

[orphenix]

tnks mille funziona