javascript - Google map alternative roads show with different colour

Question

I have the following google map JsFiddle - where i need to display multiple option between 2 location - what i did show only one route - need if possible 2 more to draw with different color.

In documentations what i got i wasn't to clear for me to solve.

$(document).ready(function(){

var markers = [

    {
        "title": '',
        "lat": '56.965969',
        "lng": '24.143496',
        "description": ''
       }

   ,

    {
        "title": '',
        "lat": '56.966259',
        "lng": '24.385860',
        "description": ''
       }];

var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(56.975749, 24.279310),
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    styles: [
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#d3d3d3"
                },
        {
            "lightness": 17
                }]
            },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f5f5f5"
                },
        {
            "lightness": 20
                }]
            },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 17
                }]
            },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 29
                },
        {
            "weight": 0.2
                }]
            },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 18
                }]
            },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 16
                }]
            },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f5f5f5"
                },
        {
            "lightness": 21
                }]
            },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#dedede"
                },
        {
            "lightness": 21
                }]
            },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
        {
            "visibility": "on"
                },
        {
            "color": "#ffffff"
                },
        {
            "lightness": 16
                }]
            },
    {
        "elementType": "labels.text.fill",
        "stylers": [
        {
            "saturation": 36
                },
        {
            "color": "#333333"
                },
        {
            "lightness": 40
                }]
            },
    {
        "elementType": "labels.icon",
        "stylers": [
        {
            "visibility": "off"
                }]
            },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f2f2f2"
                },
        {
            "lightness": 19
                }]
            },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
        {
            "color": "#fefefe"
                },
        {
            "lightness": 20
                }]
            },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
        {
            "color": "#fefefe"
                },
        {
            "lightness": 17
                },
        {
            "weight": 1.2
                }]
            }]
};

var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
var poly = new google.maps.Polyline(
{
    map: map,
    strokeColor: '#a4c431',
    strokeOpacity: 1.0,
    strokeWeight: 5
});

var lat_lng = new Array();

var image = 'images/sillava-pin.png';
var marker = new google.maps.Marker(
{
    position: new google.maps.LatLng(56.966259, 24.385860),
    map: map,
    title: 'Sillava',
    icon: image
});
for (i = 0; i < markers.length; i++)
{
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);

}

for (var i = 0; i < lat_lng.length; i++)
{
    if ((i + 1) < lat_lng.length)
    {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        path.push(src);
        poly.setPath(path);
        service.route(
        {
            origin: src,
            destination: des,
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++)
                {
                    path.push(result.routes[0].overview_path[i]);
                }
            }
        });
    }
} })

Thanks!

Answer 1

1. set the provideRouteAlternatives option to the DirectionsRequest to true

provideRouteAlternatives
Type: boolean Whether or not route alternatives should be provided. Optional.

2. add a second loop to process any additional routes returned

   service.route({
       origin: src,
       destination: des,
       provideRouteAlternatives: true,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
   }, function (result, status) {
       if (status == google.maps.DirectionsStatus.OK) {
           for (var j = 0; j < result.routes.length; j++) {
               var path = new google.maps.MVCArray();
               polyArray.push(new google.maps.Polyline({
                  map: map,
                  strokeColor: colors[j],
                  strokeOpacity: 1.0,
                  strokeWeight: 5
               }));
               polyArray[polyArray.length - 1].setPath(path);
               for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
                   path.push(result.routes[j].overview_path[i]);
               }
           }
       }
   });
   

proof of concept fiddle

code snippet:

$(document).ready(function() {

  var markers = [

    {
      "title": '',
      "lat": '56.965969',
      "lng": '24.143496',
      "description": ''
    }, {
      "title": '',
      "lat": '56.966259',
      "lng": '24.385860',
      "description": ''
    }
  ];
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(56.975749, 24.279310),
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false
  };
  var service = new google.maps.DirectionsService();
  var polyArray = [];
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);


  var lat_lng = new Array();
  var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(56.966259, 24.385860),
    map: map,
    title: 'Sillava',
    icon: image
  });
  for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);

  }

  for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      // path.push(src);
      // poly.setPath(path);
      service.route({
        origin: src,
        destination: des,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var j = 0; j < result.routes.length; j++) {
            var path = new google.maps.MVCArray();
            polyArray.push(new google.maps.Polyline({
              map: map,
              strokeColor: colors[j],
              strokeOpacity: 1.0,
              strokeWeight: 5
            }));
            polyArray[polyArray.length - 1].setPath(path);
            for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
              path.push(result.routes[j].overview_path[i]);
            }
          }
        }
      });
    }
  }

});

.map {
  width: 100%;
  height: 100%;
}
body,
html {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_1" class="map"></div>