Membuat Web Map Application menggunakan Google Maps dan JQuery Mobile (2-direction)
10:41 PMWeb Maps Like Native Android
Kali ini kita akan memberikan fitur navigasi pada peta kita, fitur navigasi sudah disediakan oleh Google Maps Javascript API V3 jadi kita tinggal menggunakan service nya saja, bagaimana cara menggunakannya?? mari kita praktekkan bersama-sama.
Dari kode yang sudah kita buat pada tutorial sebelumnya, silakan baca dulu tutorial Membuat Web Map Application menggunakan Google Maps dan JQuery Mobile part 1 jika belum membacanya.
Pertama yang kita lakukan adalah melakukan deklarasi dan inisiasi variabel directionsDisplay dan directionsService, variabel ini kita buat sebagai global variabel, jadi letakkan di luar function.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay nantinya akan digunakan untuk menyimpan objek DirectionsRenderer yang disediakan oleh google maps, DirectionsRenderer digunakan untuk menampilkan rute yang ada nantinya.
directionsService digunakan untuk memberikan rute yang ada berdasarkan suatu titik (start dan end) yang kita berikan.
Setelah itu kita panggil objek DirectionsRenderer, letakkan kode berikut pada fungsi initialize petadirectionsDisplay = new google.maps.DirectionsRenderer();
Karena kita baru mempunyai satu marker saja, mari kita buat satu lagi marker yang akan menjadi titik akhir atau daerah tujuan kita.
var marker2 = new google.maps.Marker({
position : new google.maps.LatLng(-7.810217,110.270995),
icon : 'https://dl.dropboxusercontent.com/u/47464119/congress.png',
map : map,
title : 'tujuan',
});
google.maps.event.addListener(marker2, 'click', function(event)
{
calcRoute(center,event.latLng)
});
Pada marker ke dua ini saya beri custom icon supaya dapat dibedakan mana marker asal dan mana marker tujuan, untuk mengganti icon kita tinggal menambahkan options icon dan link lokasi dari gambar ikon tersebut. Saya juga menambahkan sebuah event listener agar ketika marker kedua di klik maka akan menampilkan rute navigasi pada peta.
Sekarang mari kita buat fungsi untuk merequest rute yang ada, kita namakan fungsi ini calcRoute, fungsi ini saya berikan dua parameter yaitu start untuk daerah awal dan end untuk daerah tujuan.
function calcRoute(start,end) { var request = { origin:start, destination:end, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }
Pada variabel request terlihat option travelMode, kita bisa mengganti TravelMode yang ada sesuai dengan yang disediakan oleh Google Maps. Setelah menambahkan function calcRoute jangan lupa kita juga menampilkan DirectionsDisplay pada peta yang ada, mari kita tambahkan kode ini pada function initialize()
directionsDisplay.setMap(map);
Sampai disini kita sudah bisa melihat rute jalan antara marker yang pertama dengan marker yang kedua, hasilnya kurang lebih akan jadi seperti berikut:
Jika ada yang kesulitan silakan download langsung codingan lengkapnya disini download
6 comments
saya mau tanya, buat rute seperti yang diatas berbasis website (php) gimana codingan ny y..
ReplyDeletebutuh bantuan nih buat skripsi.. makasih
kalo mau buat peta pakenya javascript + library/API javascript (leaflet, google maps, bing maps)
Deletekalo php itu untuk koneksi ke databasenya. .
di dokumentasi google maps v3 sudah lengkap kalau hanya untuk routing saja
maaf,,mas...mau nanya tentang jquery mobile yg database titik lokasi latlangny bs d simpan d tabase gimana,,y mas?..rencanany mau buat tgas pencarian alamat penting d kota padang memakai jquery mobile,mas..jd d dlm databse ada data alamat instansi,dan pilihan utk lihat peta gitu ,,mas..
ReplyDeletecoba baca baca tentang ajax, untuk memanggil lokasi yang di database bisa menggunakan ajax, nanti datanya bisa dibaca dalam bentuk json atau xml.
Deletemas,,klau menentukan rute dari lokasi kita di gps gimana,,y mas?...
ReplyDeletemass Link dropboxya mati bisa di update mass?..
ReplyDelete