Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Dipublikasikan oleh El Cicko pada

menghitung tarif berdasarkan jarak 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 terdapat kebijakan baru untuk Google Maps API dimana 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.

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

El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

48 Komentar

Desta · Maret 4, 2016 pada 12:00 pm

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 · Maret 6, 2016 pada 1:41 am

    amin…makasih ya 😀

      Desta · Maret 6, 2016 pada 4:29 pm

      amiinn.. masama mas 😀

      Bayu · Agustus 16, 2016 pada 6:06 pm

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

Arfiandi · Maret 6, 2016 pada 3:43 am

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 · Maret 6, 2016 pada 4:07 am

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

    El Cicko · Maret 6, 2016 pada 6:00 pm

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

azizal · Maret 21, 2016 pada 1:00 pm

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 · Maret 21, 2016 pada 1:05 pm

    maf mas ,sudah fix hehe

poppy · April 1, 2016 pada 2:33 pm

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 · April 1, 2016 pada 5:19 pm

    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 😀

azizal · April 7, 2016 pada 10:16 am

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 · April 7, 2016 pada 10:46 am

    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 · April 10, 2016 pada 3:33 pm

      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

Herman Afandy · Mei 12, 2016 pada 4:05 pm

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

rudy · Juni 3, 2016 pada 5:16 pm

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 · Juni 4, 2016 pada 7:20 am

    mungkin karena masalah frame ?

rudy · Juni 4, 2016 pada 8:23 am

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 · Juni 5, 2016 pada 1:17 am

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

rudy · Juni 4, 2016 pada 8:30 am

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 · Juni 5, 2016 pada 1:15 am

    biasanya ini terjadi karena website tidak memiliki sertifikat SSL mas

wahyu subrata · Juni 4, 2016 pada 6:38 pm

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

doni · Juni 23, 2016 pada 1:30 pm

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

alnardi · Juni 24, 2016 pada 8:31 am

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,

Doni · Juni 25, 2016 pada 8:30 pm

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

    Hamzah · Juni 26, 2016 pada 9:42 pm

    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

Dhia · Juni 27, 2016 pada 10:00 am

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

aldi · Juli 30, 2016 pada 7:12 am

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

Bayu · Agustus 16, 2016 pada 7:22 pm

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

Dicky · September 19, 2016 pada 4:01 pm

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 · September 20, 2016 pada 12:03 am

    Terima kasih juga ya gan 😀

Amang · November 11, 2016 pada 11:15 pm

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

    El Cicko · November 12, 2016 pada 3:34 am

    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 · November 15, 2016 pada 3:20 pm

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

        El Cicko · November 15, 2016 pada 4:08 pm

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

widodo · November 13, 2016 pada 11:21 pm

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

    El Cicko · November 13, 2016 pada 11:38 pm

    maksudnya untuk blog gimana mas?

Maul · Desember 3, 2016 pada 12:34 pm

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 · Maret 17, 2017 pada 3:03 pm

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

taufik · Maret 15, 2017 pada 3:35 pm

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

taufik · Maret 15, 2017 pada 3:39 pm

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 · Maret 15, 2017 pada 5:01 pm

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

syaifudin · April 11, 2017 pada 6:22 pm

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

Errika K · Juni 7, 2017 pada 4:44 pm

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

asep · Januari 19, 2019 pada 11:56 am

mas gan, kalo markernya ngk muncul piye iku ?

Tinggalkan Balasan

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