Tuesday, 20 September 2016

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

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. Semoga tidak ada error :D

9 komentar

bang putu.. saya minta sourcodenya dong.. udah nyoba di android studio error mulu

bro putu, bisa minta sourcode nya gak .??? sbagai reverensi saja..
kirim ke mail nya saya iebal110099@gmail.com

Mantap gan.
Tapi file layout nya gak disertakan jadi tetap bingung saya hehe

Lupa gan, hahaha terlalu banyak kodingan. Ntr lah saya update lagi.

iya gan, tlong disertakan coding layoutnya juga ya.. udah hampir kelar ngikuti tutorial ini.. tanggung..

Please post a polite comment and do not post a spam
EmoticonEmoticon