Show Multiple Routes in Google Map API

Add required JS: 

  

    <script src="script/jquery.min.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    <script type="text/javascript">

        var map;

        var RouteCoordinates = [];

        var Routes = [];

        var RouteColor = ["#0094ff", "#479f67", "#3c9a94", "#a17b4b",

                                  "#4ad98a", "#50cfe1", "#8ad3a4", "#40cbf1",

                                  "#5ecf98", "#17c31f"];

        var DrivePath, ResLocInterval;

        var directionsService = new google.maps.DirectionsService();

        $(document).ready(function () {

            var myOptions = {

                zoom: 15,

                center: new google.maps.LatLng(40.748492, -73.985496),

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            $("#btnGetDirections").click(function () {

                calcRoute($("#txtAddress1").val(), $("#txtAddress2").val(), 'Root1');

            });

            $("#btnGetDirections1").click(function () {

                calcRoute($("#txtAddress11").val(), $("#txtAddress22").val(), 'Root2');

            });

        });

        function calcRoute(start, end, FromRes) {

            for (var i = 0; i < Routes.length; i++) {

                if (Routes[i].Title == FromRes) {

                    if (Routes[i].PolyLine != null || Routes[i].PolyLine != undefined) {

                        Routes[i].PolyLine.setMap(null);

                        Routes[i].PolyLine = null;

                        clearInterval(Routes[i].Interval);

                        Routes[i].Direction.setMap(null);

                    }

                    Routes.splice(i, 1);

                    break;

                }

            }

            var directionsDisplay = new google.maps.DirectionsRenderer({

                draggable: true,

                map: map,

                polylineOptions: { strokeColor: "#6666FF", strokeOpacity: 0.4, strokeWeight: 5 },

                markerOptions: { title: FromRes }

               

            });

            var objRoute = new Object();

            objRoute.Title = FromRes;

            objRoute.PolyLine = null;

            objRoute.Interval = null;

            objRoute.OffSetCnt = 0;

            objRoute.Direction = directionsDisplay;

            Routes.push(objRoute);

            google.maps.event.addListener(directionsDisplay, 'directions_changed', function (e) {

                ShowPolyLine(directionsDisplay.getDirections(), directionsDisplay.markerOptions.title);

            });

            var request = {

                origin: start,

                destination: end,

                travelMode: google.maps.TravelMode.DRIVING,

                provideRouteAlternatives: true

            };

            directionsService.route(request, function (result, status) {

                if (status == google.maps.DirectionsStatus.OK) {

                    directionsDisplay.setDirections(result);

                }

            });

        }

        function ShowPolyLine(result, Title) {

            RouteCoordinates = [];

            for (var i = 0; i < result.routes[0].overview_path.length; i++) {

                RouteCoordinates.push(new google.maps.LatLng(result.routes[0].overview_path[i].lat(), result.routes[0].overview_path[i].lng()))

            }

            var Filter = $(Routes).filter(function () {

                return this.Title == Title;

            });

            if (Filter.length > 0) {

                var lineSymbol = {

                    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                    scale: 3,

                    fillColor: '#FF0000',

                    fillOpacity: 0.7,

                    strokeColor: '#FF0000',

                    strokeOpacity: 0.7,

                    strokeWeight: 4

                };

                if (Filter[0].PolyLine != null || Filter[0].PolyLine != undefined) {

                    Filter[0].PolyLine.setPath(RouteCoordinates);

                    clearInterval(Filter[0].Interval);

                }

                else {

                    Filter[0].PolyLine = new google.maps.Polyline({

                        map: map,

                        path: RouteCoordinates,

                        icons: [{

                            icon: lineSymbol,

                            offset: '100%'

                        }],

                        geodesic: true,

                        strokeColor: RouteColor[Math.random().toString().substr(5, 1)],

                        strokeOpacity: 1.0,

                        strokeWeight: 5

                    });

                }

                Filter[0].Interval = window.setInterval(function () {

                    Filter[0].OffSetCnt = (Filter[0].OffSetCnt + 1) % 4000;

                    var icons = Filter[0].PolyLine.get('icons');

                    icons[0].offset = (Filter[0].OffSetCnt / 40) + '%';

                    Filter[0].PolyLine.set('icons', icons);

                }, 100);

            }

        }

    </script>

    <style>

        html, body, form {

            height: 100%;

            width: 100%;

            margin: 0px;

            padding: 0px;

        }

        #map_canvas {

            width: 80%;

            height: 100%;

            float: left;

        }

    </style>

HTML

<div id="map_canvas"></div>

        <div style="width: 20%; float: right;">

            <input type="text" placeholder="From" id="txtAddress1" value="23.026126, 72.547248" /><br />

            <input type="text" placeholder="To" id="txtAddress2" value="23.039496, 72.554963" /><br />

            <input type="button" value="Get" id="btnGetDirections" /><br />

            <input type="text" placeholder="From" id="txtAddress11" value="23.027054, 72.544780" /><br />

            <input type="text" placeholder="To" id="txtAddress22" value="23.029088, 72.551282" /><br />

            <input type="button" value="Get" id="btnGetDirections1" />

        </div>

Check Result