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

Abdullah Mara picture Abdullah Mara · Mar 14, 2016 · Viewed 9.1k times · Source

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

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

Google maps directions example ss 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

geocodezip picture geocodezip · Mar 14, 2016

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

colored route segments

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>