Randomize in google map polyline color for each route

Question

Here we try to distinguish the polyline by color who originate from a single source. The data provide to polyline contains the lat,lng with the another property. Other prop. will be have multiple records of latlng.

// Here we created a map object.
var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.TERRAINr
};
// Here we get the map id of the html page.
$scope.map = new google.maps.Map(document.getElementById('map'), 
mapOptions);   
// Here we assign data for the polyline path prop.
var tripdata=[];
tripdata=[
id:1, {lat:23.333, lng:87.777},
id:2, {lat:24.343, lng:78.876}
];
var vehiclePath; // Here we declare a variable of polyline object.
vehiclePath = new google.maps.Polyline({
                 path: tripdata,
                 geodesic: true,
                 strokeColor: '#0000FF',
                 strokeOpacity: 1.0,
                 strokeWeight: 2,                    
                 map: $scope.map                  
             });

I've added functionality so that only unique colors are used. — George K, May 18 '18 at 13:03

George K · Accepted Answer · 2018-05-18T13:02:51.193

You could do this:

// Here we created a map object.
var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.TERRAINr
};
// Here we get the map id of the html page.
$scope.map = new google.maps.Map(document.getElementById('map'), 
mapOptions);   
// Here we assign data for the polyline path prop.
var tripdata=[];
tripdata=[
id:1, {lat:23.333, lng:87.777},
id:2, {lat:24.343, lng:78.876}
];
var vehiclePath; // Here we declare a variable of polyline object.
vehiclePath = new google.maps.Polyline({
                 path: tripdata,
                 geodesic: true,
                 strokeColor: getRandomColor(),
                 strokeOpacity: 1.0,
                 strokeWeight: 2,                    
                 map: $scope.map                  
             });

var colors = []; // empty array to ensure colours are unique
function getRandomColor(var id) {
  var color;
  do
    var letters = '0123456789ABCDEF';
    color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
  while(!colors.includes(color));
  colors.push(color);
  return color;
  }

Let me know if that helps

Random color generator

Randomize in google map polyline color for each route

1 Answers1