Update Map On Alternative Route Select

I'd like to update google map shown on the left when alternative route from the top-right is clicked ('suggested routes'). Currently it only list alternative routes and directions

Solution 1:

You are passing map to setMap() and it is out of scope. Try to move the var map to the global scope, just above your function initMap;

var colours = ['#1FD2CF', '#FF4000', '#FFFF00'];
var map;
functioninitMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: {lat: 44.291971, lng: 19.9722431}
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function() {
            document.getElementById("setPanel").innerHTML = "";
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
}

Also, where do you get the colours from in your calculateAndDisplayRoute function?

Just add an array of colours as shown in the example and it should work...