[GIS] Cara Menampilkan Lokasi di Sepanjang Rute Pada Google Maps

Selamat siang, baiklah kali ini saya akan memberikan sedikit tutorial tentang Sistem Informasi Geografis (SIG) atau biasa disebut GIS. Dalam SIG ini kita akan memakai tool milik Google yaitu Google Map. Pembahasannya sendiri adalah tentang bagaimana caranya menampilkan suatu lokasi berdasarkan rute perjalanan yang dipilih pengguna.

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:

[GIS] Cara Menampilkan Lokasi di Sepanjang Rute Google Maps

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:

[GIS] Cara Menampilkan Lokasi di Sepanjang Rute Pada Google Maps

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