Question

19

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

rated 0 times [ 25] [ 6] / answers: 1 / hits: 28651 / 12 Years ago, thu, january 17, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynd

Add To Favorites

Follow

Total Points: 470

Total Questions: 108

Total Answers: 120

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 12 Years ago grayson · Accepted Answer

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

  });

}