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?

Could you please share the code to draw multiple polylines. I have tested your code but i can see only one line in the map — Dibeesh
– Dibeesh, Commented Oct 9, 2014 at 5:07

duncan · Accepted Answer · 2014-06-03 11:03:25Z

19

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
  });
}

edited Jun 3, 2014 at 11:03

answered Jan 17, 2013 at 13:58

duncan

32k15 gold badges84 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jas Over a year ago

Thnx for the reply. But I can only see only one color. Plese see the png [link]coeindia.in/test/harry/map.png

duncan Over a year ago

you sure that's the right png, I just see a gray+white striped box

Jas Over a year ago

yes i opened it from the above mentioned link. i can see a png file. I can email you if you like.

Dr.Molle Over a year ago

use other colors. the first 6 colors are shades of red which may be hard to distinguish(especially when you are colourblind like me). The last 3 paths you can only see at a very high zoom-level

Jas Over a year ago

@Dr.Molle I guess I am color blind. I changed the colors and It worked like a charm. Thanx Dr.Molle Thnx duncan

|

Divyanshu Rawat · Accepted Answer · 2016-06-17 09:11:55Z

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);
    }

F. Milliard · Accepted Answer · 2020-03-27 21:58:20Z

0

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());

answered Mar 27, 2020 at 21:58

F. Milliard

1

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related