Drawing routes between markers using Google map API

I want to draw a routes between every two points in map using Google map API.

this my full answer about all my questions in this question :

<div class="paths">

            <a class="path" style="border-left: 6px solid #000000;" 
        href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
        start="24.468498279212913,39.615068435668945" 
        end="24.45985083570312,39.66432183980942" 
        color="#000000" 
        ide="5"
        >

        Alkhaldia/King abdulaziz road        </a>
            <a class="path" style="border-left: 6px solid #ff0000;" 
        href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
        start="24.471681716990837,39.61108535528183" 
        end="24.501539614912353,39.61090564727783" 
        color="#ff0000" 
        ide="6"
        >

        Saied Al Shuhada        </a>
            <a class="path" style="border-left: 6px solid #00b1ff;" 
        href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
        start="24.46727273186149,39.606807231903076" 
        end="24.462189756758278,39.545153975486755" 
        color="#00b1ff" 
        ide="7"
        >

        Sport City        </a>
            <a class="path" style="border-left: 6px solid #ffa900;" 
        href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
        start="24.467270,39.606753" 
        end="24.422826,39.520943" 
        color="#ffa900" 
        ide="8"
        >

        Al duaitha        </a>
            <a class="path" style="border-left: 6px solid #41ff00;" 
        href="#" onclick="javascript:reset();javascript:calcRoute($(this).attr('start'), $(this).attr('end'), $(this).attr('color'), $(this).attr('ide'))" 
        start="24.46727273186149,39.606807231903076" 
        end="24.41422098604895,39.62093710899353" 
        color="#41ff00" 
        ide="9"
        >

        Alia Mall        </a>


            <select style="display: none;" id="points_5">
        <option value="24.459040260025855,39.65409994125366"></option><option value="24.47105675396141,39.64922904968262"></option>        </select>
            <select style="display: none;" id="points_6">
                </select>
            <select style="display: none;" id="points_7">
        <option value="24.472355501781344,39.54960644245148"></option>        </select>
            <select style="display: none;" id="points_8">
        <option value="24.420433,39.530202"></option><option value="24.472325,39.549333"></option>        </select>
            <select style="display: none;" id="points_9">
                </select>

</div>

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

<script type="text/javascript">        
        var markers = [
                            [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
                            [24.422826,39.520943, 'ALduaytha Station', '2'],
                            [24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
                            [24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
                            [24.467275173202733,39.6067750453949, 'Al salam Stop', '1'],
                            [24.467270,39.606753, 'Al salam Stop', '1'],
                            [24.41422098604895,39.62093710899353, 'Alia Mall Station', '2'],
                            [24.472316441891955,39.54898953437805, 'Turn Left', '0'],
                            [24.420433,39.530202, 'Turn Left', '0'],
                            [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
                            [24.46953339357955,39.63470220565796, 'Turn Left', '0'],
                            [24.472355501781344,39.54960644245148, 'Turn Right', '0'],
                            [24.47195513734061,39.548882246017456, 'Turn Left', '0'],
                            [24.421215736553147,39.5303213596344, 'Turn Right', '0'],
                            [24.462189756758278,39.545153975486755, 'Prince Mohammed Spor City Station', '2'],
                            [24.46727273186149,39.606807231903076, 'Al salam Stop', '1'],
                            [24.472325,39.549333, 'Al Salam Road', '0'],
                            [24.458810758735982,39.65430110692978, 'Turn left', '0'],
                            [24.467270,39.606753, 'Al salam Stop', '1'],
                            [24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
                            [24.422826,39.520943, 'ALduaytha Station', '2'],
                            [24.501539614912353,39.61090564727783, 'Saied Alshuhada station', '2'],
                            [24.471681716990837,39.61108535528183, 'Saied Alshuhada', '1'],
                            [24.45985083570312,39.66432183980942, 'Al Khaledia Station', '2'],
                            [24.459040260025855,39.65409994125366, 'Prince MOhammed ben Abdulaziz', '0'],
                            [24.47105675396141,39.64922904968262, 'Turn left', '0'],
                            [24.471681716990837,39.61108535528183, 'Saied Alshuhada Stop', '1'],
                            [24.468498279212913,39.615068435668945, 'Al Baqee Stop', '1'],
                            [24.501539614912353,39.61090564727783, 'Saied Alshuhada Station', '2'],

        ];            

        var rendererOptions;
        var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {

            // Try HTML5 geolocation
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);

              var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'You Are Here !'
              });

              map.setCenter(pos);
            }, function() {
              handleNoGeolocation(true);
            });
          } else {
            // Browser doesn't support Geolocation
            handleNoGeolocation(false);
          }

            var mapOptions = {

                center: new google.maps.LatLng(24.4676711,39.610379),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.BOTTOM_CENTER
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.LEFT_BOTTOM
                },
                disableDefaultUI: true,
                scaleControl: true,
                styles: [{featureType: "landscape", stylers: [{saturation: -100}, {lightness: 65}, {visibility: "on"}]}, {featureType: "poi", stylers: [{saturation: -100}, {lightness: 51}, {visibility: "simplified"}]}, {featureType: "road.highway", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "road.arterial", stylers: [{saturation: -100}, {lightness: 30}, {visibility: "on"}]}, {featureType: "road.local", stylers: [{saturation: -100}, {lightness: 40}, {visibility: "on"}]}, {featureType: "transit", stylers: [{saturation: -100}, {visibility: "simplified"}]}, {featureType: "administrative.province", stylers: [{visibility: "off"}]/**/}, {featureType: "administrative.locality", stylers: [{visibility: "off"}]}, {featureType: "administrative.neighborhood", stylers: [{visibility: "on"}]/**/}, {featureType: "water", elementType: "labels", stylers: [{visibility: "on"}, {lightness: -25}, {saturation: -100}]}, {featureType: "water", elementType: "geometry", stylers: [{hue: "#ffff00"}, {lightness: -25}, {saturation: -97}]}]
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

            var infowindow = new google.maps.InfoWindow({
              maxWidth: 500,
            });

            var marker;

            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < markers.length; ++i) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(markers[i][0], markers[i][1]),
                    map: map,
                    title:markers[i][2],
                    icon: 'images/'+markers[i][3]+'_icn.png' ,
                    optimized: false
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                      infowindow.setContent(markers[i][2]);
                      infowindow.open(map, marker);
                    }
                  })(marker, i));

                  bounds.extend(new google.maps.LatLng(markers[i][0], markers[i][1]));
            }
            map.fitBounds(bounds);


        }

        function handleNoGeolocation(errorFlag) {
          if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
          } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
          }

          var options = {
            map: map,
            position: new google.maps.LatLng(60, 105),
            content: content
          };

          var infowindow = new google.maps.InfoWindow(options);
          map.setCenter(options.position);
        }

        function calcRoute(ss, ee, color, ide) {

            rendererOptions = {
             suppressMarkers : true,
             polylineOptions: {
              strokeColor: color
            }
          };

          directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

          var start = ee.toString();
          var end = ss.toString();
          var waypts = [];
            var checkboxArray = document.getElementById('points_'+ide);

            for (var i = 0; i < checkboxArray.length; i++) {
              waypts.push({
                  location:checkboxArray[i].value,
                  stopover:true});

            }

          var request = {
              origin:start,
              destination:end,
              waypoints: waypts,
              optimizeWaypoints: true,
              travelMode: google.maps.TravelMode.DRIVING
          };

          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);

                directionsDisplay.setMap(map);

            }
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);


      function clearWaypoints() {

        origin = null;
        destination = null;
        waypoints = [];
        directionsVisible = false;
      }

        function reset() {
            clearWaypoints();
            directionsDisplay.setMap(null);
            directionsDisplay.setPanel(null);
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
          }
    </script>