2

I am working on Google Maps. I need to draw poly-lines with different color.

Here is my code.

var response = {
    "points": [
        [17.36603966, 78.45885158, 17.36608062, 78.46013904],
        [17.36608062, 78.46013904, 17.36644926, 78.46131921],
    ]
};

for (var i = 0; i < response.points.length; i++) {
    directionsService.route({
        'origin': response.points[i][0] + ',' + response.points[i][1],
        'destination': response.points[i][2] + ',' + response.points[i][3],
        'travelMode': 'DRIVING'
    }, function (directions, status) {       
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressInfoWindows: true,
            suppressMarkers: true,
            polylineOptions: {
                strokeColor:'red'
            },
            map: mymapid
        });       
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(directions);
        }
    });
};

How can I add dynamic color for my Points?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
Prashanth Reddy
  • 749
  • 5
  • 19
  • possible duplicate of [Use Google maps API to draw a polyline that changes color](https://stackoverflow.com/questions/38709732/use-google-maps-api-to-draw-a-polyline-that-changes-color) – geocodezip Dec 03 '19 at 11:16
  • possible duplicate of [Make condition to set the colour of polyline on google maps API](https://stackoverflow.com/questions/42177928/make-condition-to-set-the-colour-of-polyline-on-google-maps-api) – geocodezip Dec 03 '19 at 11:16
  • What do you mean by "add dynamic color"? Do you want each entry in your "points" array to have a different color? How will you specify that color? – geocodezip Dec 03 '19 at 11:19
  • @geocodezip yes. i can add color at last for array if possible to use that color in poly-line – Prashanth Reddy Dec 03 '19 at 16:36

1 Answers1

1

please use below code

var response = {
    "points": [
        [17.36603966, 78.45885158, 17.36608062, 78.46013904,'green'],
        [17.36608062, 78.46013904, 17.36644926, 78.46131921,'red'],
    ]
};
var colorcollecetion=[];
var  colorpositionid=0;
for (var i = 0; i < response.points.length; i++) {
colorcollecetion.push(response.points[i][4]);
    directionsService.route({
        'origin': response.points[i][0] + ',' + response.points[i][1],
        'destination': response.points[i][2] + ',' + response.points[i][3],
        'travelMode': 'DRIVING'
    }, function (directions, status) {       
        directionsDisplay = new google.maps.DirectionsRenderer({
            suppressInfoWindows: true,
            suppressMarkers: true,
            polylineOptions: {
                strokeColor: colorcollecetion[colorpositionid]
            },
            map: mymapid
        });   
        colorpositionid++;
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(directions);
        }
    });
};
Hari
  • 134
  • 5