How to set different stroke color for routes in Google map

[divyakrishnan]

Hi..
I am using Google map to show the route path between the longitude and latitude points.
Here the default stroke color of the route path is blue.
I want to set it into different colors.
That is,from point A to B is reb,B to C is green,C to D is black like that.

I am Using following code to show the route path.

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var geocoder;


var marker;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var from = "";
function initialize() 
{   directionsDisplay = new google.maps.DirectionsRenderer({
    preserveViewport: true
  });
    /*center*/  
    var latlng = new google.maps.LatLng(13.284198157123711, 80.25910379882816);
    //var lat_lng = new Array();
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
  directionsDisplay.setMap(map);

    //var rendererOptions = { map: map };
    // directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

var locations = [
      [ 13.284198157123711, 80.25910379882816],
      [ 13.181262431729227, 80.27421000000004],
      [ 13.037481060623552, 80.15061380859379],
      [12.923064986866681, 80.11490824218754]

    ];

    var point1 = new google.maps.LatLng(13.284198157123711,80.25910379882816);
    var point2 = new google.maps.LatLng(13.181262431729227,80.27421000000004);
    var point3 = new google.maps.LatLng(13.037481060623552,80.15061380859379);
    var point4 = new google.maps.LatLng(12.923064986866681,80.11490824218754);

    // Setup the different icons and shadows
    var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

    var icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',      
      iconURLPrefix + 'yellow-dot.png'
    ];

    var iconsLength = icons.length;
    var markers = new Array();
    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        icon: icons[2]
      });
    }

      markers.push(marker);  
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
/*end*/
    var wps = [{ location: point2 }, { location: point3 }];

    var org = point1;
    var dest = point4;

    var request = {
            origin: org,
            destination: dest,
            waypoints: wps,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

    directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
                else
                    alert ('failed to get directions');
            });
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
<div id='map' style="width: 500px; height: 500px"></div></body>
</html>

I don't know how to do this.Please help me to find a solution.
Thanks.

[AleMonteiro]

This is the basics for setting stroke color:

directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

 directionsDisplay.setMap(map);

 directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
    else
        alert ('failed to get directions');
 });

But I guess this will set the color for all routs bound to this directionsDiplsay.
Maybe you can create multiple displays.

[divyakrishnan]

Thanks for the reply.

Please tell me how I can create multiple displays on my sample code?

[almostbob]

no way points,
route 1-2, with a declared colour
route 2-3, ditto
route 3-4, ditto,