Integrasi Google Maps pada Aplikasi Mobile Web Tizen
Toni Haryanto 26 September 2016
Banyak diantara kebutuhan sehari-hari yang kini sudah banyak dibantu oleh aplikasi mobile. Salahsatu diantaranya terkait peta dan pencarian lokasi. Ada banyak library maps yang bisa kita manfaatkan untuk membuat aplikasi yang didukung oleh fitur lokasi, seperti OpenStreetMaps dan Google Maps. Pada Tutorial ini kita akan belajar bagaimana menggunakan beberapa fitur yang disediakan oleh API Google Maps dan menerapkannya di dalam aplikasi mobile web Tizen kita.
Persiapan Aplikasi
Buka Tizen IDE, lalu pilih menu File > New > Tizen Web Project. Pada tab Template, pilih tipe Basic. Beri nama project lalu klik tombol Finish.Buka file index.html, lalu ganti kode HTML di dalamnya menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gmaps in Tizen</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="./css/ratchet.min.css" rel="stylesheet">
<style type="text/css">
#map {width: 100%;height: 100%;}
</style>
<script src="./js/zepto.min.js"></script>
<script src="./js/ratchet.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="./js/gmaps.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">Gmaps</h1>
</header>
<div class="content">
<div id="map"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
Seperti kita lihat bersama, pada project ini kita akan menggunakan framework CSS yang bernama Ratchet. Selain itu kita juga menggunakan library JavaScript ZeptoJS. Kamu dapat menggunakan jQuery juga. Tapi karena pada project ini kita tidak akan menggunakan semua kekuatan jQuery, melainkan hanya fitur-fitur dasarnya, maka kita bisa menggunakan ZeptoJS. Cara penggunaan ZeptoJS sama persis dengan jQuery, dengan fitur yang terbatas dan ukuran file yang jauh lebih kecil.
Pada project ini kita akan menampilkan Google Maps dengan bantuan Gmaps.js. Kita dapat menggunakan API Google Maps secara langsung, tapi dengan bantuan library Gmaps.js ini kita dapat mengimplementasikan Google Maps dengan kode yang lebih ringkas.
Unduh terlebih dahulu source code Ratchet [disini] dan gabungkan masing-masing foldernya dengan folder yang sudah ada di root, yakni folder css/, js/, dan fonts/.
Unduh juga zeptoJS [disini] dan simpan file zepto.min.js di dalam folder js/.
Terakhir, unduh library Gmaps.js [disini] dan simpan file gmaps.min.js di dalam folder js/.
Mengatur Privilege dan Policy
Karena kita harus memuat API Google Maps dari Google, kita harus terlebih dahulu memberikan kebolehan aplikasi untuk dapat menggunakan fitur tertentu, dalam kasus ini fitur koneksi internet dan location. Selain itu kita juga harus memberikan akses pada aplikasi agar dapat menerima data dari domain tertentu, dalam kasus ini karena kita akan menggunakan API Google Maps yang mana diambil dari domain google.com dan beberapa domain lainnya saat mengakses asset peta, maka kita harus mendaftarkan domain-domain tersebut pada config.xml.Buka file config.xml lalu buka tab Privilege. Tambahkan internet dan location pada privilege.
Buka tab Policy lalu tambahkan ketiga domain berikut dan simpan perubahan file.
Menampilkan Lokasi Berdasarkan Koordinat
Pada dokumen html kita sudah menyematkan elemen <div id=”map”></div> dengan css width:100%; dan height:100%;. Elemen inilah yang akan kita gunakan untuk menampilkan peta. Adapun kode JavaScript yang harus kita tuliskan adalah seperti berikut:var map = new GMaps({
el : '#map',
lat : -6.1753871,
lng : 106.8249641
});
Pada kode di atas, kita membuat objek GMaps pada variabel map, dengan parameter el untuk elemen tempat kita akan menyematkan peta, dalam hal ini kita akan menggunakan elemen #map yang sudah kita buat. Kemudian kita juga mendeklarasikan parameter lat untuk titik latitude peta dan lng untuk titik longitude peta. Simpan kode tersebut di dalam file js/main.js dan jalankan aplikasi pada Tizen Web Simulator. Hasilnya akan nampak seperti gambar berikut:
Pada kode di atas kita mendeklarasikan koordinat untuk lokasi Monumen Nasional/Monas. Dengan cara yang sama, Kamu dapat menampilkan lokasi-lokasi yang sesuai dengan kebutuhan aplikasimu. Mudah bukan?
Menampilkan Lokasi Pengguna (Geolocation)
Kita juga dapat menampilkan koordinat lokasi pengguna aplikasi untuk ditampilkan pertama kali atau menggunakan trigger tombol. Adapun kodenya sebagai berikut:GMaps.geolocate({
success : function(position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error : function(error) {
alert('Geolocation failed: ' + error.message);
},
not_supported : function() {
alert("Your browser does not support geolocation");
},
always : function() {
alert("Done!");
}
});
Tambahkan kode tersebut pada file main.js, lalu jalankan pada Tizen Web Simulator:
Sekarang tambahkan tombol ikon di dalam elemen header seperti kode berikut:
<header class="bar bar-nav"> <a class="icon icon-person pull-left" id="myLocation"></a> <h1 class="title">Gmaps</h1> </header>
Kemudian ganti kode geolocation yang sebelumnya dengan kode berikut:
$('#myLocation').click(function(e) {
e.preventDefault();
GMaps.geolocate({
success : function(position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error : function(error) {
alert('Geolocation failed: ' + error.message);
},
not_supported : function() {
alert("Your browser does not support geolocation");
}
});
})
Kode di atas akan menampilkan lokasi pengguna hanya apabila tombol myLocation di header ditekan.
Membuat Form Pencarian Lokasi
Ada banyak fitur yang dapat kita eksplorasi dari API Google Maps. Salahsatunya adalah pencarian lokasi. Kali ini kita akan menampilkan peta lokasi dari kata kunci yang dimasukkan ke dalam form pencarian.Tambahkan terlebih dahulu tombol search di header berikut jendela modal berisi form pencarian:
<header class="bar bar-nav"> <a class="icon icon-person pull-left" id="myLocation"></a> <a class="icon icon-search pull-right" href="#searchModal"></a> <h1 class="title">Gmaps</h1> </header> <div id="searchModal" class="modal"> <header class="bar bar-nav"> <a class="icon icon-close pull-right" href="#searchModal"></a> <h1 class="title">Search Location</h1> </header> <div class="content"> <form method="post" id="searchForm"> <input type="search" placeholder="Search" id="search" name="search"> <button class="btn btn-positive btn-block">Search Location</button> </form> </div> </div>
Kode di atas akan tampak seperti gambar berikut:
Sampai sini kita belum dapat menampilkan pencarian. Tambahkan dulu kode JavaScript berikut pada file main.js:
$('#searchForm').submit(function(e) {
e.preventDefault();
GMaps.geocode({
address : $('#search').val(),
callback : function(results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat : latlng.lat(),
lng : latlng.lng()
});
$('#searchModal').removeClass('active');
}
}
});
});
Simpan perubahan file. Sekarang Kamu dapat melakukan pencarian lokasi:
Menampilkan Rute
Kita akan menambahkan satu fitur lagi yakni fitur rute dari satu lokasi ke lokasi lain. Kita akan membuat satu modal lagi untuk menampilkan form untuk mencari lokasi awal ke lokasi tujuan rute. Karena tombol di kiri dan kanan header sudah maksimum, kita akan membuat menu tab. Pertama-tama hapus dulu tombol yang sudah kita buat di kiri dan kanan header. Kemudian tambahkan kode untuk membuat menu tab berikut elemnen modal untuk form rute:
<header class="bar bar-nav"> <h1 class="title">Gmaps</h1> </header> <nav class="bar bar-tab"> <a class="tab-item" id="myLocation"> <span class="icon icon-person"></span> <span class="tab-label">My Location</span> </a> <a class="tab-item" href="#routeModal"> <span class="icon icon-compose"></span> <span class="tab-label">Direction</span> </a> <a class="tab-item" href="#searchModal"> <span class="icon icon-search"></span> <span class="tab-label">Search</span> </a> </nav> <div id="routeModal" class="modal"> <header class="bar bar-nav"> <a class="icon icon-close pull-right" href="#routeModal"></a> <h1 class="title">Search Route</h1> </header> <div class="content"> <form method="post" id="routeForm"> <input type="text" placeholder="From" id="origin" name="origin"> <input type="text" placeholder="To" id="dest" name="dest"> <button class="btn btn-positive btn-block">Show Route</button> </form> </div> </div>
Tampilan menu sekarang berikut form pencarian rute akan nampak seperti gambar berikut:
Terakhir tambahkan kode berikut untuk mencari lokasi awal dan lokasi tujuan dan menampilkan garis rute dari dua lokasi tersebut:
var origin;
var dest;
$('#origin').blur(function(e){
GMaps.geocode({
address : $('#origin').val(),
callback : function(results, status) {
if (status == 'OK') {
origin = results[0].geometry.location;
map.addMarker({
lat : origin.lat(),
lng : origin.lng()
});
console.log(origin.lat() + ',' + origin.lng());
}
}
});
});
$('#dest').blur(function(e){
GMaps.geocode({
address : $('#dest').val(),
callback : function(results, status) {
if (status == 'OK') {
dest = results[0].geometry.location;
map.addMarker({
lat : dest.lat(),
lng : dest.lng()
});
console.log(dest.lat() + ',' + dest.lng());
}
}
});
});
$('#routeForm').submit(function(e) {
e.preventDefault();
map.fitZoom();
map.drawRoute({
origin : [ origin.lat(), origin.lng() ],
destination : [ dest.lat(), dest.lng() ],
travelMode : 'driving',
strokeColor : '#131540',
strokeOpacity : 0.6,
strokeWeight : 6
});
$('#searchModal').removeClass('active');
});
Kita membuat 3 buah event listener, pertama ketika field #origin dilepas (blur) kita akan mencari dan mendapatkan lokasi koordinat posisi awal, yang kemudian kita simpan di dalam variabel origin. Event yang sama kita terapkan pada field #dest. Dan terakhir event ketika pengguna mensubmit form, maka aplikasi akan menampilkan peta dengan zoom yang dapat menampung kedua lokasi, dan kemudian menggambar garis rutenya.
