javascript - Drawing multiple polyline with different color using Google map api V3 ASP.net

Question

I am able to draw multiple polyline in google map and style them, but I want to color each polyline with a different color.

Currently, I have this code:

var DrivePath = [
  new google.maps.LatLng(37.772323, -122.214897),
  new google.maps.LatLng(21.291982, -157.821856),
  new google.maps.LatLng(-18.142599, 178.431),
  new google.maps.LatLng(-27.46758, 153.027892),
  new google.maps.LatLng(12.97918167,   77.6449),
  new google.maps.LatLng(12.97918667,   77.64487167),
  new google.maps.LatLng(12.979185, 77.64479167),
  new google.maps.LatLng(12.97918333, 77.64476)
];


var PathStyle = new google.maps.Polyline({
  path: DrivePath,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

PathStyle.setMap(map);

Is there any way I can add a separate style to each polyline that I am creating?

Answer 1

Certainly. For instance suppose you know what colours you want to go with each line, let's assume you therefore have an array of colours which has a length equal to DrivePath.length - 1.

var Colors = [
    "#FF0000", 
    "#00FF00", 
    "#0000FF", 
    "#FFFFFF", 
    "#000000", 
    "#FFFF00", 
    "#00FFFF", 
    "#FF00FF"
];

Now, instead of drawing one polyline, draw a separate polyline for each coordinate.

for (var i = 0; i < DrivePath.length-1; i++) {
  var PathStyle = new google.maps.Polyline({
    path: [DrivePath[i], DrivePath[i+1]],
    strokeColor: Colors[i],
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}