title: how to draw a google maps waypoint with multi-colored polylines
body: <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>