Jadi, ketika pengguna memilih rute perjalanan dari suatu titik lokasi ke lokasi lainnya, selain akan menampilkan rute perjalan itu sendiri, lokasi-lokasi atau tempat tertentu yang ada di sepanjang rute tadi bisa kita tampilkan.
Jika kurang paham yang saya jelaskan diatas, perhatikan gambar di bawah ini:
Image from cookiesHQ |
Pada gambar di atas, bisa kita liat ada rute yang membentang dari titik A ke titik B. Selain itu ada juga lokasi-lokasi yang ditampilkan di sekitar rute tersebut yang ditandai dengan icon warna merah. Nah, bagaimana caranya menampilkan lokasi-lokasi tersebut sesuai rute yang ditampilkan? saya akan membahasnya.
Baca Juga:
1. Cara Menghilangkan (Remove) Index.Php Pada Codeigniter Di Linux
2. Tutorial Autocomplete Locations/Places Google Map
Di Google Map API ada beberapa metode untuk menampilkan suatu lokasi, yang paling mudah adalah dengan menggunakan nilai Latitude/Longitude (ya, walaupun kedua nilai inilah point penting dalam google map. hehe). Ada juga yang menggunakan radius dari suatu titik lokasi (akan dijelaskan di artikel yang berbeda), dan satu lagi adalah menampilkan sesuai rute.
Persiapan
Oke, hal yang perlu disiapkan adalah:1. Library Routeboxer, bisa didownload di sini.
2. Data Latitude dan Longitude kita ambil dari database ya, jadi silahkan buat dulu database-nya.
Ah iya, sebelumnya saya anggap kalian sudah mengerti bagaimana cara menampilkan Google Maps itu sendiri ya. Oke lah.
Sebelumnya silahkan buat halaman yang sudah bisa menampilkan map dan bisa menggunakan rute (Google Direction). Jika sudah, silahkan tambahkan kode javascript ini di kodingan kalian.
Penjelasan:
- Baris 6: Convert value dari satuan Mile ke Km- Baris 8-12: Request rute perjalanan dari "Surabaya" (origin) ke "Sidoarjo" (destination)
- Baris 15-28: Map API akan me-render request rute sebelumnya dan akan menggambar boxes (baris 22).
- Baris 31-43: Fungsi untuk menggambar boxes (kotak) pada canvas map. Ubah strokeWeight menjadi 0 jika ingin menghilangkan kotak pada canvas map
- Baris 46-53: Menghapus boxes yang sebelumnya sudah ada di canvas
- Baris 56-65: Fungsi untuk membuat marker
- Baris 68-80: Fungsi untuk mengambil data latitude dan longitude dari database. Selanjutnya akan ada perulangan (looping) pada baris 70 sebanyak kotak (boxes) yang ada pada canvas map. Pada baris 73 akan dicek nilai latitude dan longitude yang berada di dalam kotak (boxes) lah yang akan ditampilkan di map.
Nah, hasil akhir dari kodingan diatas jika berhasil akan seperti gambar dibawah ini:
Oke, itulah tutorial singkat tentang Cara Menampilkan Lokasi di Sepanjang Rute Pada Google Maps. Bagi kalian yang mau full source code-nya silahkan tulis email di komentar. Akan saya kirim lewat email.
Oke, tengkyu. Babay.... Wassalam...
suryoatm@gmail.com
BalasHapusterma kasih
gocareid@gmail.com
BalasHapusterimakasih.
Mantep bang
BalasHapusrizkikali4@gmail.com
Terimakasih
muhammad.snsc@live.com
BalasHapusnuhun kang.. sukses slalu!
Iroel.ami@gmail.com
BalasHapusTerima kasih mas
Semoga berkah
Sukses selalu
fajarnugraha999@gmail.com
BalasHapusazzam2579@gmail.com
BalasHapus006kilometer@gmail.com
BalasHapusigedeputra1995@gmail.com
BalasHapusTerima kasih banyak mas
Semoga berkah ilmu yang telah diberikan
Sukses selalu
rizaldy.deta@gmail.com
BalasHapussemoga berkah ilmunya mas :)
fariedrahmad@gmail.com
BalasHapusThanks, semoga ilmunya berkah bro
rohimabdul531@gmail.com
BalasHapuspas banget, lagi nyari tutor ini gan.
emilyashinta@gmail.com
BalasHapusterima kasih banyak tutorialnya semoga ilmunya jadi barokah..amin.
BalasHapusboleh kirim source codenya ke email junsharing62@gmail.com untuk bahan belajar..terima kasih..
hry.permadi@gmail.com
BalasHapusterima kasih sebelumnya gan,
BalasHapuslutfiyagus@gmail.con
sharova@yahoo.com
BalasHapusterimakasih gan
Canggih bang....
BalasHapusSemoga berkah ilmunya dan makin sukses...
hadyfasters@gmail.com
Semoga berkah ilmunya
BalasHapushakimlogorg@yahoo.co.id
Semoga berkah ilmunya
BalasHapusali.robien@gmail.com
sanakhardan@gmail.com
BalasHapusMohon dikirim juga mas
mochamzdaniel@gmail.com
BalasHapusterimakasih mas.
keren gan, efri1.riyadi@gmail.com
BalasHapusMantab gan
BalasHapuslcind4ni@gmail.com
Gan ane boleh pelajari softwarenya
BalasHapuswangitehes@gmail.com
Terima kasih sebelumnya gan.