Biaya GrabExpress

by idhamperdameian

HTML

<style type="text/css">
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
    #right-panel {
      font-family: 'Roboto','sans-serif';
      line-height: 30px;
      padding: 0 10px;
      position: absolute;
      bottom: 0;
      background-color: white;
    }
    #right-panel p {
      margin: 5px 0;
    }
    #floating-panel {
      position: absolute;
      top: 10px;
      left: 178px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border-left: 1px solid #b5b1b185;
      text-align: center;
      font-family: 'Roboto','sans-serif';
      line-height: 30px;
      padding-left: 10px;
      border-radius: 0 4px 4px 0;
      -moz-border-radius: 0 4px 4px 0;
      -webkit-border-radius: 0 4px 4px 0;
    }
    .pac-container {
        width: 300px !important;
    }
</style>

<div id="floating-panel">
    <b>Asal: </b>
    <input type="text" id="start" class="lokasi" />
    <b>Tujuan: </b>
    <input type="text" id="end" class="lokasi" />
    <input type="button" id="go" value="GO!"/>
</div>
<div id="map"></div>
<div id="right-panel">
  <p>Total jarak: <span id="total"></span></p>
  <p>Estimasi pengiriman GrabExpress Instan - Bike: <span id="goid">Rp. -</span></p>
  <p>Estimasi pengiriman GrabExpress Instan - Car: <span id="gosdd">Rp. -</span></p>
</div>
<script>
    //https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
    //https://developers.google.com/maps/documentation/javascript/examples/directions-draggable?hl=id
function initMap() {
    var timeout = setTimeout(function() {}, 1000);
    var lokasi = document.getElementsByClassName('lokasi');
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: -6.1942748, lng: 106.829119}  // Jakarta (Thamrin City).
    });

    var directionsService = new google.maps.DirectionsService;
    var directionsRenderer = new...