Get Rute Direction Multi Marker

<style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 90%;
        height: 70%;
      }
      #right-panel {
        float: right;
        width: 34%;
        height: 70%;
      }
      .panel {
        height: 100%;
        overflow: auto;
      }
    </style>

<style>
div.ex1 {
  background-color: white;
  width: 110px;
  height: 110px;
  overflow: scroll;
}

div.ex2 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: hidden;
}

div.ex3 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: auto;
}

div.ex4 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: visible;
}
</style>
<br><br><br><br><br><br>

<div id="map" class="col-lg-8"></div>
</div>
    <div id="right-panel" class="ex1 col-lg-4">
      <p>Total Distance: <span id="total"></span></p>
    </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: -6.353525, lng: 106.831629} 
        });

        var directionsService = new google.maps.DirectionsService;
        var directionsRenderer = new google.maps.DirectionsRenderer({
          draggable: true,
          map: map,
          panel: document.getElementById('right-panel')
        });

        directionsRenderer.addListener('directions_changed', function() {
          computeTotalDistance(directionsRenderer.getDirections());
        });
//ui-6.353525, 106.831629:
//PLN -6.167230, 106.725907
//-6.306477, 106.882463
//-6.246414, 106.874909
//-6.168428, 106.827406

//var myLatLng1 = new google.maps.LatLng({lat: -6.353525, lng: 106.831629});
//var myLatLng2 = new google.maps.LatLng({lat: -6.167230, lng: 106.725907});


// var myLatLng11 = new google.maps.LatLng({lat: -6.306477, lng: 106.882463});
//var myLatLng21 = new google.maps.LatLng({lat: -6.246414, lng: 106.874909});
//var myLatLng31 = new google.maps.LatLng({lat: -6.168428, lng: 106.827406});


var MDATA;

<?php

 $sql="select `id_rute` from `tb_rute`";
 $jum=getJum($conn,$sql);
  $int=floor($jum/30);
 
$i=0;
$no=0;
$koor=array();
$gab="";
   $sql="select * from `tb_rute` order by id_rute asc"; // virtual mappss direction
$arr=getData($conn,$sql);
$k=0;
$n=0;
foreach($arr as $d) {
if($k==$int || $k==0){
$no++;
$IDR[$n][0]=$d["id_rute"];
$koor[$n][0]=$d["latitude"];
$koor[$n][1]=$d["longitude"];
$gab.="$no. index ke-$i-ID_RUTE-".$IDR[$n][0]."=".$koor[$n][0]."#".$koor[$n][1]."<br>";

$n++;
$k=0;
}
$i++;
$k++;
$LAT2=$d["latitude"];
$LON2=$d["longitude"];

}

$jd=$n-5; // 30-1 = 29

$awal="{lat: ".$koor[0][0].", lng: ".$koor[0][1]."}";
//$ahir="{lat: ".$koor[$jd][0].", lng: ".$koor[$jd][1]."}";

$ahir="{lat: ".$LAT2.", lng: ".$LON2."}";

?>

var myLatLng1 = new google.maps.LatLng(<?php echo $awal;?>);
var myLatLng2 = new google.maps.LatLng(<?php echo $ahir;?>);


var AR=[];

<?php
for($i=1;$i<$jd;$i++){
$kordinat="{lat: ".$koor[$i][0].", lng: ".$koor[$i][1]."}";
$n=$i-1;
?>
var MLL = new google.maps.LatLng(<?php echo $kordinat;?>);
AR[<?php echo $n;?>]={location: MLL};;
<?php
}
?>

displayRoute(myLatLng1, myLatLng2, directionsService,directionsRenderer,AR);
      }

      function displayRoute(origin, destination, service, display,AR) {
        service.route({
          origin: origin,
          destination: destination,
          waypoints: AR,
          travelMode: 'DRIVING',
          avoidTolls: true
        }, function(response, status) {
          if (status === 'OK') {
            display.setDirections(response);
          } else {
            alert('Could not display directions due to: ' + status);
          }
        });
      }

      function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
          total += myroute.legs[i].distance.value;
        }
        total = total / 1000;
        document.getElementById('total').innerHTML = total + ' km';
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhSg6I2JvHNU_jLqIpvc5MEwc_xi3Ttvg&callback=initMap">
    </script>
 <?php
echo $jd."=$int=<hr>$gab<br>";

  echo "AL1=".$awal."#<br>";
echo "AL2=".$ahir."#<br>";
?>