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:
For drawing 2 different Polylines
function initialize()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
};
var polyOptions2 = {
strokeColor: '#FFFFFF',
strokeOpacity: 1.0,
strokeWeight: 3
};
var polyline = new google.maps.Polyline(polyOptions);
var polyline2= new google.maps.Polyline(polyOptions2);
polyline.setMap(map);
polyline2.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng);
}
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
});
}
The above answers are correct. This would results in separated polylines. This could be improved by adding round start caps and round end caps of each polylines.
polyline.setEndCap(new RoundCap());
polyline2.setStartCap(new RoundCap());