Press "Enter" to skip to content

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 Comments

  1. Desta Desta Maret 4, 2016

    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 .. 🙂

    • El Cicko El Cicko Post author | Maret 6, 2016

      amin…makasih ya 😀

      • Desta Desta Maret 6, 2016

        amiinn.. masama mas 😀

      • Bayu Bayu Agustus 16, 2016

        BAng kok ada tulisan “ERROR was : REQUEST_DENIED” … kira kira kenapa ya…

  2. Arfiandi Arfiandi Maret 6, 2016

    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.

    • Arfiandi Arfiandi Maret 6, 2016

      Wah, maafkan pertanyaan newbie saya. Saya kok jadi lupa… tinggal diakali pakai attribut disabled atau readonly aja, kan… 🙂

    • El Cicko El Cicko Post author | Maret 6, 2016

      amin..amin…makasih ya mas hehehehe 😀
      bisa diubah attributenya aja mas jadi readonly, kalau disable malah nanti valuenya ga ikut terkirim.

  3. azizal azizal Maret 21, 2016

    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

    • azizal azizal Maret 21, 2016

      maf mas ,sudah fix hehe

  4. poppy poppy April 1, 2016

    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

    • El Cicko El Cicko Post author | April 1, 2016

      Halo mbak Poppy,
      untuk mempelajari GIS dengan menggunakan Google Maps, mbak bisa lihat-lihat dulu tutorial tentang GIS yang sudah saya rangkum disini, jika ada pertanyaan lebih lanjut mbak bisa kirim email ke saya di riky.hasibuan@gmail.com. Terima kasih 😀

  5. azizal azizal April 7, 2016

    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

    • El Cicko El Cicko Post author | April 7, 2016

      Ada beberapa output yang dihasilkan dari response Geocoder API, seperti pada contoh di halaman dokumentasinya disini. Nah, kita tinggal sedikit memodifikasi pada output tag element long_name atau short_name dengan memberi validasi di kedua tag tersebut. Jika hasilnya bukan “kota solo” (saya ambil secara keseluruhan) maka perhitungan tidak dilakukan. Semoga membantu mas

      • azizal azizal April 10, 2016

        soalnya beberapa kota di solo langsung ambil data kata2 dari jawa tengah ,ga ada long name atau shortname surakarta nya mas ,

        tapi misal nya gni aja mas ,itu untuk tampilan peta nya jga menampilkan format jarak driving mode gt apakah bisa ? jadi ga cuman garis lurus aja ?

        ehehe

  6. Herman Afandy Herman Afandy Mei 12, 2016

    kalo lokasi awal nya menggunakan gps geoclocation gmana ya mas cara nya

  7. rudy rudy Juni 3, 2016

    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

    • El Cicko El Cicko Post author | Juni 4, 2016

      mungkin karena masalah frame ?

  8. rudy rudy Juni 4, 2016

    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?

    • El Cicko El Cicko Post author | Juni 5, 2016

      coba diakali dengan membuat sebuah file html terpisah lalu masukkan frame lalu embed kode htmlnya di widget mas…

  9. rudy rudy Juni 4, 2016

    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?

    • El Cicko El Cicko Post author | Juni 5, 2016

      biasanya ini terjadi karena website tidak memiliki sertifikat SSL mas

  10. wahyu subrata wahyu subrata Juni 4, 2016

    baru baca undangannya..selamat atas pernikahannya dari pembaca blog ini

  11. doni doni Juni 23, 2016

    mas ini kenapa ya ? This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

  12. alnardi alnardi Juni 24, 2016

    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,

  13. Doni Doni Juni 25, 2016

    cara nambahin coding direction dimana ya? mohon bantuannya , sskripsi dateline
    Terima Kasih

    • Hamzah Hamzah Juni 26, 2016

      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

  14. Dhia Dhia Juni 27, 2016

    mas cara nambahin direction di coding diatas mas, udah saya coba coba , ngak nampil juga direction mas, mohon bantuannya mas

  15. aldi aldi Juli 30, 2016

    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

  16. Bayu Bayu Agustus 16, 2016

    bang kok ada tulisan “”ERROR was : REQUEST_DENIED” kenapa ya ? mohon bantuannya….

  17. Dicky Dicky September 19, 2016

    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

    • El Cicko El Cicko Post author | September 20, 2016

      Terima kasih juga ya gan 😀

  18. Amang Amang November 11, 2016

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

    • El Cicko El Cicko Post author | November 12, 2016

      Waalaikumsalam, sama-sama mas. Kemungkinan error dari codenya mas, kebetulan untuk geolocation sendiri fiturnya udah dibatasi mas, untuk versi online hanya bisa berjalan di situs dengan domain https

      • Kuta Truf Kuta Truf November 15, 2016

        Baik mas. maaf banyak tanya maklum newbie. Kalau menambahkan fungsi draggable pada marker map bagaimana mas

        • El Cicko El Cicko Post author | November 15, 2016

          mas tinggal tambahkan opsi draggable : true pada marker lalu buat event namanya dragend. bisa dibaca di dokumentasinya disini

  19. widodo widodo November 13, 2016

    Kalau untuk blog bagaimana om, bisa dibantu tidak
    bila bisa dikirim ke badeusaha@gmail.com

    • El Cicko El Cicko Post author | November 13, 2016

      maksudnya untuk blog gimana mas?

  20. Maul Maul Desember 3, 2016

    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.”

    • guntur goblcok guntur goblcok Maret 17, 2017

      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” ,

  21. taufik taufik Maret 15, 2017

    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

  22. taufik taufik Maret 15, 2017

    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

    • El Cicko El Cicko Post author | Maret 15, 2017

      Makasih ya bro..sebenernya udah pernah bikin tapi ga di publish aja…hehehehe :))

  23. syaifudin syaifudin April 11, 2017

    mas yang alamat kok gak bisa auto keluar bantuan ya.
    padahal udah kopas script nya
    tetep ngak bisa

  24. Errika K Errika K Juni 7, 2017

    mas bisa dibuat versi android studionya? butuh bgt buat skrisweet tercinta mas :’)
    mohon responnya.

  25. asep asep Januari 19, 2019

    mas gan, kalo markernya ngk muncul piye iku ?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *