Membuat Web Map Application menggunakan Google Maps dan JQuery Mobile (part 1)

2:58 PM


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:

Phonegap

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.

Phonegap












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><!-- /navbar -->
                                </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.


Jikalau yang ini sudah bisa, silakan baca tutorial kedua, menambahkan direction service

Selamat Mencoba, GBU



 

Share This Story

Tags: ,

Just an Ordinary Techno Learner

You Might Also Like

2 comments