how to draw a google maps waypoint with multi-colored polylines
<p>Hi I try to draw polylines with directions waypoints on google maps .</p>

<p>I tried something like that.
<a href="https://i.stack.imgur.com/RsG3P.png" rel="nofollow noreferrer">My draw</a>
<a href="https://i.stack.imgur.com/RsG3P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RsG3P.png" alt="My draw"></a>
I want to draw the routes with different colors  like this.</p>

<p><a href="https://i.stack.imgur.com/xJ0kp.png" rel="nofollow noreferrer">Google maps directions example ss</a>
<a href="https://i.stack.imgur.com/xJ0kp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xJ0kp.png" alt="Google maps directions example ss"></a></p>

<p>I wrote this sample code .</p>

<pre><code> function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [
          {
            location: '41.062317, 28.899756',
            stopover: true
          },
          {
            location: '41.062276, 28.898866',
            stopover: true
          },
          {
            location: '41.061993, 28.8982',
            stopover: true
          }
        ];
    directionsService.route({
      origin: {lat: 41.063328, lng:28.901215},
      destination:{lat: 41.060756, lng:28.900046},
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setOptions({
          directions :response,
        })
        drawpolylines(directionsDisplay.getMap())
        var route = response.routes[0];

      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });

  }

  function drawpolylines(map) {
     var flightPlanCoordinates = [
      {lat: 41.062317, lng: 28.899756},
      {lat: 41.062276, lng: 28.898866},
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
  }
</code></pre>