Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Pada tutorial kali ini saya akan membahas tentang bagaimana cara menghitung tarif berdasarkan jarak dengan Google Maps seperti pada aplikasi transportasi online yang sekarang sedang marak seperti Gojek atau Grab. Artikel ini terinspirasi dari komentar salah seorang pengunjung di salah satu artikel saya. Coba lihat artikel saya sebelumnya tentang bagaimana cara Membuat Sistem Google Directions Sendiri.

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

1. Rumus

Pada intinya kita akan menggunakan sebuah rumus untuk menghitung tarifnya dengan perhitungan bahwa total tarif adalah hasil dari total jarak yang dikalikan dengan tarif dasar perkilometer.

Sebagai contoh, kita ingin menghitung jarak dari Jl. Dr. Setiabudi ke Jl. Buah Batu di Kota Bandung, jarak yang kita dapatkan adalah sekitar 10 KM.

Sekarang kita tinggal membuat aturan bahwa tarif yang dikenakan adalah Rp. 500 perkilometer sehingga total dari total tarif dari perhitungan diatas adalah Rp. 5000,-  dengan rumus sebagai berikut

Total Tarif = Jarak (KM) x 500

Sederhana, bukan? Sekarang kita akan membuat script untuk melakukan perhitungan tarif dengan Google Maps berdasarkan jarak dengan memodifikasi kode dari artikel saya sebelumnya tentang cara Menghitung Jarak Marker Pada Google Maps.

2. Script

Agar dapat berjalan dengan baik, kita membutuhkan setidaknya beberapa library / fitur dari Google Maps yaitu Google Places, Geocode dan juga fitur Autocomplete dari Geocoder.

Perlu diperhatikan bahwa sekarang Google Maps menerapkan sistem pembayaran sehingga kita tidak dapat menggunakan API Key secara gratis.

Untuk menggunakan Google Maps API untuk Javascript kita wajib menyertakan informasi kartu kredit agar Google dapat memberlakukan biaya jika kuota gratis yang kita miliki melebih batas.

Baca Juga : Kebijakan Baru Untuk Google Maps API

Sebenarnya kita bisa juga menambahkan dengan fitur GPS sehingga kita bisa langsung mengetahui jarak dari tempat kita berada ke tempat tujuan.

OK, berikut scriptnya ya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Menghitung Tarif Berdasarkan Jarak Dengan Google Maps</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <style type="text/css">
    #map {
      height: 480px;
      width: 100%;
      border: solid thin #333;
      margin-top: 20px;
    }

    #map img { 
      max-width: none;
    }

    #mapCanvas label { 
      width: auto; display:inline; 
    } 
  </style>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
  <script type="text/javascript">
    var map;
    var geocoder;
    var bounds = new google.maps.LatLngBounds();
    var markersArray = [];
      
    // setting marker untuk marker asal dan tujuan
    var destinationIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
    var originIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";

    // tentukan terlebih dahulu letak petanya 
    function initialize() {
      var opts = {
        center: new google.maps.LatLng(-7.25009,112.744331),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'), opts);
      geocoder = new google.maps.Geocoder();

      // setting agar texfield pada kolom asal dan juga tujuan dapat memanggil fungsi autocomplete
      var asal = new google.maps.places.Autocomplete((document.getElementById('origins')),{ types: ['geocode'] });
      var tujuan = new google.maps.places.Autocomplete((document.getElementById('destinations')),{ types: ['geocode'] });
    }

    /*      
    menghitung jarak dari data yg dikirim dari form
    disini saya setting untuk mode DRIVING dan menggunakan jalan raya atau juga tol,
    jika ingin mengganti konfigurasinya, silahkan ganti false dengan true
    */
    function calculateDistances() {
      var service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix(
      { 
        origins: [document.getElementById("origins").value],
        destinations: [document.getElementById("destinations").value],
        travelMode: google.maps.TravelMode.DRIVING, 
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
      }, callback);
    }
      
    // responde dari Googlemaps Distance Matrix akan diolah dan di kirim ke output HTML
    function callback(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        alert('Error was: ' + status);
      } else {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;
        deleteOverlays();

        for (var i = 0; i < origins.length; i++) {
          var results = response.rows[i].elements;
          addMarker(origins[i], false);
          for (var j = 0; j < results.length; j++) {
            addMarker(destinations[j], true);
          }
    
          /*          
            disini perhitungan tarif, pertama hilangkan dulu 'km'
            dan ubah tanda desimal koma dengan titik. 
          */
          var str = results[0].distance.text;
          var distance = str.replace(' km', '');
          var distance = distance.replace(',','.');

          /*          
            jumlah kilometer dikalikan dengan 500 
            setelah itu hasilnya kita konversikan kedalam format kurs rupiah
          */
          var tarif = "Rp."+ formatNumber(distance * 500)+",-"; 
          document.getElementById("billing").value = tarif;
          document.getElementById("distance").value = results[0].distance.text;
    
        }
      }
    }
    // fungsi sederhana untuk mengkonversi bilangan bulat menjadi format kurs rupiah
    function formatNumber (num) {
      return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
    }

    // menampilkan marker untuk origin dan juga destination
    function addMarker(location, isDestination) {
      var icon;
      if (isDestination) {
        icon = destinationIcon;
      } else {
        icon = originIcon;
      }
      geocoder.geocode({'address': location}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            icon: icon
          });
          markersArray.push(marker);
        } else {
          alert("Terjadi kesalahan: "
            + status);
        }
      });
    }
      
    // menghapus koordinat marker sebelumnya dan menggantinya dengan koordinat yang baru
    function deleteOverlays() {
      if (markersArray) {
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
        markersArray.length = 0;
      }
    }
  </script>        
</head>
<body onload="initialize()">
  <nav class="light-green darken-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo" style="font-size: 18px;">Menghitung Tarif Berdasarkan Jarak Dengan Google Maps</a>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <div class="row">
        <form class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input placeholder="Isi Asal" id="origins" type="text" class="validate">
              <label for="origins">Asal</label>
            </div>
            <div class="input-field col s6">
              <input id="destinations" placeholder="Isi Tujuan" type="text" class="validate">
              <label for="destinations">Tujuan</label>
            </div>
            <div class="input-field col s6">
              <a class="btn waves-effect waves-light" onclick="calculateDistances();">Hitung</a>
            </div>
          </div>
        </form>
      </div>
      <div class="row">
        <div class="input-field col s6">
          <input id="distance" type="text" placeholder="Jarak">
          <label for="distance">Jarak</label>
        </div>
        <div class="input-field col s6">
          <input id="billing" type="text" placeholder="Total Tarif">
          <label for="billing">Tarif (Rp.500,- / Km)</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          <p>
            * <br>
            O = Origin / Asal <br>
            D = Destination / Tujuan 
          </p>
          <div id="map"></div>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>

3. Output

Dari script diatas, output yang dapat dihasilkan adalah sebagai berikut

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Sekian dulu tutorial saya tentang bagaimana cara menghitung tarif berdasarkan jarak dengan Google Maps. Kamu bisa mengembangkan kembali script diatas sesuai dengan kebutuhan kamu.

Silahkan dicoba dan semoga bermanfaat 😀

UPDATE : Kode ini membutuhkan API Key dari Google Maps. Keterangan Lebih Lanjut

Demo

48 pemikiran pada “Menghitung Tarif Berdasarkan Jarak Dengan Google Maps”

  1. Mantap Banget Mas tutorialnya,, Beberapa hari yang lalu saya ada comment tentang ini.. ehh sekarang udah keluar aja tutorialnya,,, Makasih Mas,, Kalau deket saya datang mas undangan pernikahannya, hehe berhubung jauh kirim doa aja deh.. Semoga berjalan lancar dan semoga langgeng menjadi pasangan yang SAMAWA .. 🙂

    Balas
  2. Luar Biasa… ini tutorial yang sangat berharga sekali, mas…. Terima kasih. Saya turut mendoakan semoga semua acara pernikahan mas Riky dan mba Shika berjalan dengan lancar. Demikian juga dalam mengarungi lautan rumah tangga, semoga diberkati Allah, tentram, aman, berlimpah rizky, dan dikarunia keturunan yang dapat dibanggakan dan membanggakan.

    Sedikit pertanyaan berkenaan dengan tutorialnya, mas…
    jarak kilometer yang terbentuk kan dalam tag input, ya… bagaimana penulisannya jika saya ingintampilkan dalam bentuk text sehingga user tidak bisa merubah nilai jarak tersebut.

    Terima kasih.

    Balas
  3. permisi mas , kalau download full source code nya gimana ya ?

    soalnya saya copypaste codingnya ga spti tampilan spt itu mas ,

    tutorial yang saya butuh kan mas hehe

    Balas
  4. Mas elcicko,

    Mas, saya butuh banyak bantuan, saya sedang mengerjakan skripsi, tema nya GIS.
    Kalau boleh dan tidak merepotkan, boleh kah saya di kasih tutorial tahapan mana yang perlu saya lakukan dalam maping ini 🙂
    Terima kasih

    Regards,
    Poppy Calvina

    Balas
  5. halo mas elcicko , saya ada project nih ,tapi itu kan wilayahnya melingkup seluruh indonesia ya , kalau cuman misal saya melingkup daerah solo saja bagaimana ya ?

    terimakasih

    Balas
  6. Sudah saya coba di blogspot saya (di page) semua work , tapi semua widget jadi berantakan, sy gk ngerti masalahnya. Akhirnya sy copot dan sy pasang yg hanya ngitung jarak sm perkiraan waktu tempuh, bisa dianalisa gak yaa di web saya, mohon bantuannya soalnya sy butuh bgt, thanks

    Balas
  7. mas Cicko sudah saya praktekkan di template responsive bisa 100% ok, tetapi kok kalau di template bawaan blogger bisa jalan tetapi kok berantakan ya widget nya, apa yang harus saya lakukan?

    Balas
  8. satu lagi mas, sory banyak nanya…. saat ini saya sudah migrasi ke https …..sedangkan sumber daya program di atas masih ada yg http. Akhirnya semua sy rubah jadi https….di komputer tidak ada masalah sertifikat kemanan tetapi pas di buka lewat hp android ada masalah sertifikat keamanan, gimana mas solusinya?

    Balas
  9. halo mas, Selamat atas pernikahannya dan Semoga menjadi keluarga yang sakinah, Mawaddah warrahmah,
    Tutorialnya sangat membantu, hanya saja saya sudah download ke local saya, saya lakukan perubahan terhadap Google API dengan akun API yang saya daftarkan. Petanya sudah tampil, tapi kenapa ketika saya ketik yang isian Asal dan Tujuan tidak keluar otomatis nama tempat seperti yang didemokan online. adakah yang salah dari settingan saya?, mohon pencerahannya.

    Terima kasih sebelumnya,

    Balas
    • kalau ditambah dengan direction takutnya berdampak dengan jaraknya gan, jadi mendingan pake marker saja , lagi pula direction itu biasanya digunakan untuk aplikasi mobile, kalau android sudah support direction dengan jarak, kan masih berbasis web

      Balas
  10. mas, ini coding nya pas saya jalankan. kok gg bisa mas ya.

    ” Ups! Ada sesuatu yang salah.
    Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya.”

    itu gimana fixnya mas,?
    saya masih newbi

    Balas
  11. Happy wedding ya broo, semoga menjadi keluarga yg harmonis dan bahagia selamanya 😊

    Tutorialnya sangat membantu buat ane yang awam, ane ijin gunain ya script nya. Thanks broo

    Balas
  12. Assalamualaikum. Mas terimaksi tutorialnya. semua berjalan seperti demo yan mas buat. tapi waktu di modifikasi dengan geoclocation koq error ya mas

    Balas
  13. om ini ada error gini kenapa ya “Oops! Something went wrong.
    This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

    Balas
    • ganti link ini “http://maps.googleapis.com/maps/api/js?libraries=places” dengan
      “https://maps.googleapis.com/maps/api/js?key=ISI_DENGAN_API_KEY&libraries=places” ,

      Balas
  14. Programnya sudah mantap hanya saja antara asal dan tujuan tidak tampak jalur jalan yang dituju, saran jika di buat warna antara asal dan tujuan akan lebih baik lagi, mantap

    Balas
  15. Tantangan buat kamu bro…jika ini kamu kembangkan menjadi program seperti gojek,uber,grabike, pasti bermanfaat untuk ojek-ojek pangkalan yang ga bisa ikut di ojek online diatas

    Balas

Tinggalkan komentar