Drawing multiple polyline with different color using Google map api V3 ASP.net
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
});
}
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);
}