Menampilkan Jarak, Durasi dan Jalur Antara Dua Tempat di Google Maps Android

Hallo semua, sudah saya saya tidak memposting artikel dikarenakan banyak project lagi rudet-rudetnya dan kejar tayang hahaha

Kali ini saya akan membagikan tutorial tentang bagaimana menampilkan jarak, durasi dan rutenya pada Google Maps Android. Teman-teman pasti pernah memanfaatkan fitur Google Maps untuk navigasi, fitur navigasi dalam Google Maps akan mempermudah kalian mencari tempat meskipun tidak tau arah karna Google Maps sendiri yang akan memandu kalian. Lihat Gambar 1

Gambar 1

Nah tutorial kali ini mirip mirip seperti itu. Pada Gambar 1 kalian akan dapat mengetahui berapa jarak dan lamanya ke tempat tujuan, dan juga disana kalian akan melihat jalur mana yang direkomendasikan oleh Google Maps.

PERSIAPAN 

1. Memperoleh API KEY dari Google
2. Proses Development di Android Studio

IMPLEMENTASI

1. Mendapatkan KEY dan mengaktifkan Google Maps API

Buka link berikut ini : https://developers.google.com/maps/documentation/android-api/  , setelah masuk ke page nya, klik GET KEY pada pojok kanan atas. Lihat Gambar 2

Gambar 2

Selanjutnya, buat project baru. Nama projectnya sesuaikan saja dengan project kalian di Android Studionya. Tapi bebas sih mau apa saja. Lihat Gambar 3

Gambar 3

Pilih + Create a new project, isikan nama projectnya dan tekan button ENABLE API. Setelah tekan button enable api, bebera saat kemudian kalian akan diberikan Server Key. Server Key inilah yang akan kalian gunakan dan pasang di AndroidManifest kalian. Lihat Gambar 4

Gambar 4

Terlihat di Gambar 4, kalian sudah mendapatkan API KEY nya.  Kalian juga bisa masuk ke console nya dengan menekan link GO TO CONSOLE. Lihat Gambar 5

Gambar 5

Kalian bisa ganti-ganti namanya. Sesuaikan saja biar ingat, karena jika sembarangan membuat nanti (disaat banyak project) akan kebingungan. Pengalaman sendiri hehee

2. Proses Development di Android Studio

– Layouting

Ada beberapa layout yang digunakan dalam project maps kali ini antara lain sebagai berikut :

activity_main.xml

Layout ini digunakan pada class MainActivity, yaitu untuk menampilkan google maps saat pertama kali aplikasi dibuka, melihat marker-marker yang telah dipasang dan menentukan current location user. Kode xmlnya seperti dibawah ini :


activity_main2.xml

Layout ini digunakan pada class ListDestinationActivity, yaitu untuk menampilkan list destinasi yang telah kita buat dalam sebuah list. Kode xmlnya seperti dibawah ini :


row_item_data.xml

Layout ini dipasang di class AdapterListView, digunakan untuk menampilkan item-item destinasi yang telah kita set ke dalam adapter. Kode xmlnya seperti dibawah ini :


activity_view_route.xml

Layout ini dipasang pada class ViewRouteActivity, digunakan untuk menampilkan rute dari current location ke destination. Serta akan terlihat jarak tempuh dan lamanya. Kode xmlnya seperti dibawah ini :

 – Coding Class Java

Sebelum memulai proses development, yang pertama kalian harus tau adalah endpoint dan format json didalamnya agar mudah dalam membuatkan modelnya format jsonnya bisa kalian lihat disini :

https://maps.googleapis.com/maps/api/directions/json?origin=-8.60815684,115.18285993&destination=-8.1246437,115.3133908&sensor=false&mode=driving&alternatives=true

Beberapa istilah didalam model yang akan saya buat nanti adalah mengikuti nama atribut didalam respon json pada URL diatas.

Oke mari kita mulai, agar tidak pusing kalian dalam mengikuti tutorial saya ini dan juga untuk membuat folder/package class java kalian tersetruktur, Untuk sementara kalian bisa ikutin formatnya sesuai dengan yang saya buat. Lihat Gambar 6

Gambar 6

Mari kita buat satu persatu classnya. Pertama kalian harus AndroidManifest.xml berikan beberapa permission dan masukan API-KEY-SERVER yang telah kita dapat tadi.

Kedua, compile beberapa library di build.gradle (Module:app) yang akan kita gunakan dalam project ini, sesuaikan dengan kode dibawah ini

PACKAGE MODELS

Ada beberapa model yang akan kita gunakan di tutorial kali ini, fungsi model-model ini adalah untuk melakukan getter dan setter data. Mari kita buat satu persatu

Data.java


Legs.java

Distance.java


Duration.java

DirectionResultModel.java

Class ini digunakan untuk mengambil data rute dari json

EndLocation.java

Class ini digunakan untuk mengambil LatLng dari lokasi akhir

Route.java

Class ini digunakan untuk mengambil semua data legs yang ada di json

StartLocation.java

Class ini digunakan untuk mengambil data LatLng dari lokasi awal

PACKAGE HELPERS

Dalam package ini saya simpan berbagai macam class.java yang digunakan untuk mempermudah proses development

Constant.java
Class ini berisi variable-variable yang digunakan sebagai key dalam penyimpanan data di SharedPreference dan penyimpanan URL/EndPoint


DirectionJSONParser.java

Class ini digunakan untuk mem parse data JSON yang didapat. Didalam class ini juga terdapat method untuk membuat polyline 

LoggingInterceptorGoogle.java

Seperti pada tutorial-tutorial sebelumnya class LoggingInterceptor saya gunakan untuk mempermudah debugging karena diretrofit agak susah melihat URL nya

Utils.java

Class ini berisi method-method sharedPreference yang saya gunakan untuk menyimpan data

PACKAGE APISERVICES

Dalam package ini berisi sebuah interface yang didalamnya terdapat method yang saya gunakan untuk meng eksekusi URL/EndPoint yang telah ditetapkan

ApiService.java

PACKAGE ADAPTER

Dalam package ini hanya berisi class adapter. Class adapter ini berfungsi untuk men set dan menampilkan Object list location

AdapterListView.java

PACKAGE ACTIVITIES

Pada package ini berisi class – class Activity, diantaranya :

ListDestinationActivity.java

Class ini berfungsi untuk menampilkan semua list lokasi yang akan kita tuju, nantinya ketika kita pilih salah satu lokasi, maka akan mengarah ke maps yang ada rutenya


ViewRouteActivity.java

Class ini akan memperlihatkan Jarak, durasi dan rute dari lokasi saat ini ke lokasi tujuan.

MainActivity.java

Class ini menampilkan maps beserta marker dari list lokasi yang kita punya.

Itulah beberapa langkah yang dapat kalian ikutin untuk manmpilkan Jarak, Durasi dan Rute di Maps Android. Jika sudah selesai silakan dirunning projectnya.

Silakan download project pada link berikut :

(Visited 1,505 times, 8 visits today)



Baca juga :


About The Author

Related Posts

25 Comments

  1. Hidayat rans
    November 14, 2016
  2. Merlina Frandez
    December 7, 2016
  3. bayu anggoro
    January 29, 2017
  4. Putu Guna
    January 30, 2017
  5. muhammad iqbal
    May 5, 2017
  6. Devara Eko
    June 14, 2017
  7. Putu Guna
    June 22, 2017
  8. GANDHI WIBOWO
    July 22, 2017
  9. umam
    October 11, 2017
    • putuguna
      October 13, 2017
  10. aheat
    October 25, 2017
    • putuguna
      October 26, 2017
      • aheat
        October 26, 2017
        • putuguna
          October 26, 2017
    • putuguna
      November 13, 2017
      • Matt
        November 14, 2017
        • putuguna
          November 15, 2017
          • Matt
            November 21, 2017
        • putuguna
          November 21, 2017
  11. Rofiqo
    December 1, 2017
    • putuguna
      December 4, 2017
  12. Deni
    December 13, 2017
    • putuguna
      December 14, 2017

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini