Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Halo, udah lama banget ga update lagi di sini karena yaaah apalagi kalau bukan karena sibuk dengan beberapa project. Oh iya, pada beberapa artikel saya sebelumnya saya menyebutkan bahwa saya lagi gencar-gencarnya nyari dana buat menikah, alhamdulillah semuanya berjalan dengan lancar dan pernikahan saya Insya Allah akan dilangsungkan pada hari senin depan tepatnya tanggal 7 Maret 2016. Jadi, mungkin ini adalah postingan saya yang terakhir sebagai programmer lajang. hehehe 😀

OK, cukup ah pembukanya! seperti judulnya, 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 GO-JEK atau Grab Bike. Artikel ini terinspirasi dari komentar salah seorang pengunjung di artikel saya yang menanyakan bagaimana cara untuk menghitung tarif berdasarkan jarak dengan Google Maps. Coba lihat artikel saya sebelumnya tentang bagaimana cara Membuat Sistem Google Directions Sendiri.

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps #Rumus

Masih bingung ? begini, saya kasih rumusnya. Katakanlah kita ingin menghitung jarak dari Jl. Dr. Setiabudi ke Jl. Buah Batu di Kota Bandung, jarak yang kita dapatkan sekitar 10 KM. Kita sudah membuat aturan bahwa tarif yang dikenakan adalah Rp.500 perKilometer sehingga total tarifnya adalah Rp. 5000,- . Rumusnya adalah :

Total Tarif = Jarak (KM) x 500

Sederhana kan ? Nah, sekarang kita akan membuat scriptnya dengan memodifikasi script dari artikel saya sebelumnya yaitu Menghitung Jarak Marker.

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps #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. Sebeneranya kita bisa juga menambahkan dengan fitur GPS sehingga kita bisa langsung mengetahui jarak dari tempat kita berada ke tempat tujuan.

OK, berikut scriptnya ya

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps #Output

Dari script diatas, output yang dihasilkan adalah sebagai berikut

Menghitung Tarif Berdasarkan Jarak Dengan Google Maps

Gampang kan? Kamu bisa mengembangkan kembali script diatas sesuai dengan kebutuhan kamu. Silahkan dicoba dan semoga bermanfaat 😀

Demo

Oh iya, Saya atas nama pribadi ingin mengundang kamu yang secara kebetulan sedang membaca artikel saya ini atau para pembaca setia blog saya ini ke acara pernikahan saya yang Insya Allah akan digelar pada Hari Senin, tanggal 7 Maret 2016. Kamu bisa lihat secara detail di Invitation dibawah ini.  Dateng yaaa 😀

Online Invitation

Berlangganan Artikel

Daftarkan email anda sekarang dan dapatkan update terbaru dari artikel saya

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Powered by Optin Forms

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

  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.

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

  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

  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

  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

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

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

  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?

  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?

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

  10. 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,

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

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

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

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

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

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

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

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

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

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

Tinggalkan Balasan