Membuat Web Map Application menggunakan Google Maps dan JQuery Mobile

Web Maps Like Native Apps

Dalam tutorial kali ini akan dijelaskan bagaimana menggunakan JQuery Mobile (JQM) bersamaan dengan Google Maps Javascript API. Aplikasi yang kita buat nantinya akan memiliki hasil akhir seperti berikut:

Tampak seperti aplikasi maps di native application kan? Untuk membuat peta seperti itu langkah pertama yang harus kita ketahui tentunya mengerti dan membuat halaman menggunakan JQueryMobile.

Struktur Halaman dari JQM sendiri pada body secara default adalah sebagai berikut:

<div data-role="page">

     <div data-role="header">

     </div>

     <div data-role="content">

     </div>

     <div data-role="footer">

     </div>

</div>
]]>

Div pertama menyatakan suatu halaman, JQM bisa digunakan untuk menggunakan single page website tetapi memiliki view yang terpisah, sehingga seakan-akan web application yang kita bangun memiliki banyak halaman web.

Untuk menggunakan JQM tentunya kita harus memanggil file yang diperlukan baik itu javascript maupun css nya. Untuk memanggilnya kita hanya tinggal meng-include kode dibawah ini.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Atau jika kita ingin mendownload langsung file-file diatas sehingga tidak melakukan http request ke website jquery bisa langsung menuju ke http://jquerymobile.com/download/ untuk download.

Sekarang langsung saja kita buat aplikasi webnya, pertama-tama kita buat halaman pertama yang berisi button untuk menuju peta

                <div data-role="page" id="page1">

                                <div data-role="header" data-position="fixed" data-theme="d">

                                                <h1>Ini Header</h1>

                                </div>

                                <div data-role="content">

                                                <a href="#page2" data-role="button" data-transition="slide">

                                                                Peta

                                                </a>

                                </div>

                                <div data-role="footer" data-position="fixed" data-theme="d">

                                                <h1>Ini Footer</h1>

                                </div>

                </div>

Kode diatas digunakan untuk membuat suatu halaman dengan tampilan seperti di bawah ini.

data-position dibuat fixed agar letak dari header dan footer menjadi fix, tidak berpindah lagi. Selain data-position juga terdapat data-theme pada header dan footer kode diatas, data-theme digunakan untuk memberi tema pada header dan footer nya, untuk tema yang tersedia bisa langsun dilihat pada website jquerymobile.

Pada bagian content terdapat suatu link yang berfungsi sebagai button, link ini jika ditekan akan menuju ke #page2 dan memiliki transisi berbentuk slide (masih banyak variasi transisi yang bisa dilihat langsung pada website JQM)

Sekarang kita buat halaman keduanya (#page2)

<div data-role="page" id="page2">

                                <div data-role="header" data-theme="d" data-position="fixed">

                                                <div data-role="navbar" data-iconpos="right">

                                                                <ul>

                                                                                <li><a href="#pagenav" data-icon="info" data-transition="none">Navigation</a></li>

                                                                                <li><a href="#optionNear" data-icon="gear" data-transition="none">Options</a></li>

                                                                </ul>

                                                </div>

                                </div>

                                <div data-role="content" id="map_canvas">

                                </div>

                                <div data-role="footer" data-theme="d" data-position="fixed">

                                                <div data-role="navbar">

                                                                <ul>

                                                                                <li>

                                                                                                <a href="#">

                                                                                                                <div id="ruteinfo">My Maps</div>

                                                                                                </a>

                                                                                </li>

                                                                </ul>

                                                </div>

                                </div>

                </div>

Disini kita memiliki suatu halaman yang memiliki id map_canvas yang digunakan untuk menempatkan peta. Pada halaman ini juga terdapat navbar yang dilengkapi dengan button dan icon. Nah sekarang kita edit sedikit CSS dari map_canvas nya agar peta terlihat ketika halaman di load.

#map_canvas { width: 100%; height: 90%; padding: 0; position:absolute;}

Pada map_canvas height dibuat 90% agar bagian peta terlihat semua karena alokasi halaman sudah dipakai untuk header dan footer, sedangkan position dibuat absolute agar peta yang ada nantinya akan memnuhi halaman content.

Sekarang kita buat kode javascript nya, karena tadi kita sudah meng-include JQuery maka tentunya kita bisa menggunakan fungsi yang terdapat pada library JQuery.

                $(document).ready(function(){

                                                $(document).on('pageshow', '#page2',function(e,data){

                                                                initialize();

                                                });

                                });

Kode $(document).ready(function() digunakan untuk mencegah JQuery code dieksekusi sebelum dokumen yang ada selesai di load(ready). Sedangkan kode di dalam fungsi document ready diatas adalah kode yang memanggil fungsi initialize() atau fungsi memanggil peta ketika page2 dipanggil atau ditampilkan.

Sekarang kita buat fungsi initialize() yang digunakan untuk memanggil peta dari Google Maps Javascript API V3, untuk memanggil peta dari Google Maps tentunya kita harus memanggil API nya terlebih dahulu, cara memanggilnya dapat dilihat pada postingan sebelumnya. Sebenarnya cara memanggil dan menampilkan peta Google Maps pada JQuery Mobile sama seperti memanggilnya tanpa menggunakan UI Framework, yang berbeda hanyalah bagaimana cara menampilkannya pada suatu halaman.

Berikut fungsi initialize()

                function initialize()

                                {

                                                var center = new google.maps.LatLng(-7.809069,110.267853);

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

                                                var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

                                                var marker = new google.maps.Marker({

                                                                position : center,

                                                                map : map,

                                                                title : 'Im Here',

                                                });

                                                var infoWindow = new google.maps.InfoWindow();

                                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });

                                }

Map yang dipanggil melalui fungsi initialize diatas mempunyai option seperti berikut

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

Option yang ditampilkan pada peta sebenarnya terserah kita mau menampilkan apa, tapi supaya terlihat seperti native application lebih baik kita hilangkan button-button yang tidak begitu penting.

Untuk event listener dari suatu marker ketika diclick adalah sebagai berikut:

                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });

Ketika suatu marker di Click maka akan dilakukan pengubahan isi html dari suatu document dengan id #ruteinfo, isi html nya diubah menjadi nama marker yang di click selain itu ketika marker di click juga akan menampilkan suatu infowindow yang berisi title dari marker itu sendiri.

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: