Membuat Web Map Application menggunakan Google Maps dan JQuery Mobile (2-direction)

10:41 PM

Web 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 peta
directionsDisplay = 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:

get direction google maps

 Jika ada yang kesulitan silakan download langsung codingan lengkapnya disini download

You Might Also Like

6 comments

  1. saya mau tanya, buat rute seperti yang diatas berbasis website (php) gimana codingan ny y..
    butuh bantuan nih buat skripsi.. makasih

    ReplyDelete
    Replies
    1. kalo mau buat peta pakenya javascript + library/API javascript (leaflet, google maps, bing maps)
      kalo php itu untuk koneksi ke databasenya. .
      di dokumentasi google maps v3 sudah lengkap kalau hanya untuk routing saja

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

    ReplyDelete
    Replies
    1. coba baca baca tentang ajax, untuk memanggil lokasi yang di database bisa menggunakan ajax, nanti datanya bisa dibaca dalam bentuk json atau xml.

      Delete
  3. mas,,klau menentukan rute dari lokasi kita di gps gimana,,y mas?...

    ReplyDelete
  4. mass Link dropboxya mati bisa di update mass?..

    ReplyDelete