browser - how to draw a google maps waypoint with multi-colored polylines

Question

Hi I try to draw polylines with directions waypoints on google maps .

I tried something like that. My draw I want to draw the routes with different colors like this.

Google maps directions example ss

I wrote this sample 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);
  }

Answer 1

You need to create separate polylines for each colored segment. Example below using a modified version of the renderDirectionsPolylines from this related question: Google Maps click event on route (modified to use an array of colors, applying each color to the step in the route of the number).

proof of concept fiddle

code snippet:

var map;
var infowindow = new google.maps.InfoWindow();

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    suppressPolylines: true,
    infoWindow: infowindow
  });
  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,
      })
      var route = response.routes[0];
      renderDirectionsPolylines(response, map);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}

google.maps.event.addDomListener(window, "load", initMap);

var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
var polylines = [];

function renderDirectionsPolylines(response) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var legs = response.routes[0].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      stepPolyline.setOptions({
        strokeColor: colors[i]
      })
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
  map.fitBounds(bounds);
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>