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.
<h3>Persiapan Aplikasi</h3>
Buka Tizen IDE, lalu pilih menu File &gt; New &gt; 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:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Gmaps in Tizen&lt;/title&gt;

&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
&lt;link href="./css/ratchet.min.css" rel="stylesheet"&gt;
&lt;style type="text/css"&gt;
       #map {width: 100%;height: 100%;}
&lt;/style&gt;

&lt;script src="./js/zepto.min.js"&gt;&lt;/script&gt;
&lt;script src="./js/ratchet.min.js"&gt;&lt;/script&gt;
&lt;script src="http://maps.google.com/maps/api/js"&gt;&lt;/script&gt;
&lt;script src="./js/gmaps.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

       &lt;header class="bar bar-nav"&gt;
              &lt;h1 class="title"&gt;Gmaps&lt;/h1&gt;
       &lt;/header&gt;

       &lt;div class="content"&gt;
              &lt;div id="map"&gt;&lt;/div&gt;
       &lt;/div&gt;

       &lt;script src="./js/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
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 [<a href="http://goratchet.com/">disini</a>] dan gabungkan masing-masing foldernya dengan folder yang sudah ada di root, yakni folder css/, js/, dan fonts/.

Unduh juga zeptoJS [<a href="http://zeptojs.com/">disini</a>] dan simpan file zepto.min.js di dalam folder js/.

Terakhir, unduh library Gmaps.js [<a href="https://github.com/HPNeo/gmaps/zipball/master">disini</a>] dan simpan file gmaps.min.js di dalam folder js/.
<h2>Mengatur Privilege dan Policy</h2>
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.

<img class="alignnone size-large wp-image-12775" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/1-700x413.png" alt="1" width="700" height="413" />

Buka tab Policy lalu tambahkan ketiga domain berikut dan simpan perubahan file.

<img class="alignnone size-large wp-image-12776" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/2-700x416.png" alt="2" width="700" height="416" />
<h2>Menampilkan Lokasi Berdasarkan Koordinat</h2>
Pada dokumen html kita sudah menyematkan elemen &lt;div id=”map”&gt;&lt;/div&gt; 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:
<pre>var map = new GMaps({
       el : '#map',
       lat : -6.1753871,
       lng : 106.8249641
});</pre>
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:

<img class="alignnone size-large wp-image-12777" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/3-398x700.png" alt="3" width="398" height="700" />

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?
<h2>Menampilkan Lokasi Pengguna (Geolocation)</h2>
Kita juga dapat menampilkan koordinat lokasi pengguna aplikasi untuk ditampilkan pertama kali atau menggunakan trigger tombol. Adapun kodenya sebagai berikut:
<pre>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!");
       }
});</pre>
Tambahkan kode tersebut pada file main.js, lalu jalankan pada Tizen Web Simulator:

<img class="alignnone size-full wp-image-12778" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/45.jpg" alt="45" width="640" height="415" />

Sekarang tambahkan tombol ikon di dalam elemen header seperti kode berikut:
<pre>&lt;header class="bar bar-nav"&gt;
       &lt;a class="icon icon-person pull-left" id="myLocation"&gt;&lt;/a&gt;
       &lt;h1 class="title"&gt;Gmaps&lt;/h1&gt;
&lt;/header&gt;</pre>
Kemudian ganti kode geolocation yang sebelumnya dengan kode berikut:
<pre>$('#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");
              }
       });
})</pre>
Kode di atas akan menampilkan lokasi pengguna hanya apabila tombol myLocation di header ditekan.
<h2>Membuat Form Pencarian Lokasi</h2>
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:
<pre>&lt;header class="bar bar-nav"&gt;
       &lt;a class="icon icon-person pull-left" id="myLocation"&gt;&lt;/a&gt;
       &lt;a class="icon icon-search pull-right" href="#searchModal"&gt;&lt;/a&gt;
       &lt;h1 class="title"&gt;Gmaps&lt;/h1&gt;
&lt;/header&gt;
&lt;div id="searchModal" class="modal"&gt;
       &lt;header class="bar bar-nav"&gt;
              &lt;a class="icon icon-close pull-right" href="#searchModal"&gt;&lt;/a&gt;
              &lt;h1 class="title"&gt;Search Location&lt;/h1&gt;
       &lt;/header&gt;
       &lt;div class="content"&gt;
           &lt;form method="post" id="searchForm"&gt;
              &lt;input type="search" placeholder="Search" id="search" name="search"&gt;
              &lt;button class="btn btn-positive btn-block"&gt;Search Location&lt;/button&gt;
           &lt;/form&gt;
       &lt;/div&gt;
&lt;/div&gt;</pre>
Kode di atas akan tampak seperti gambar berikut:

<img class="alignnone size-full wp-image-12779" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/67.jpg" alt="67" width="595" height="344" />

Sampai sini kita belum dapat menampilkan pencarian. Tambahkan dulu kode JavaScript berikut pada file main.js:
<pre>$('#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');
                     }
              }
       });
});</pre>
Simpan perubahan file. Sekarang Kamu dapat melakukan pencarian lokasi:

<img class="alignnone size-full wp-image-12780" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/89.jpg" alt="89" width="584" height="332" />

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:
<pre>&lt;header class="bar bar-nav"&gt;
       &lt;h1 class="title"&gt;Gmaps&lt;/h1&gt;
&lt;/header&gt;

&lt;nav class="bar bar-tab"&gt;
       &lt;a class="tab-item" id="myLocation"&gt;
              &lt;span class="icon icon-person"&gt;&lt;/span&gt;
              &lt;span class="tab-label"&gt;My Location&lt;/span&gt;
       &lt;/a&gt;
       &lt;a class="tab-item" href="#routeModal"&gt;
              &lt;span class="icon icon-compose"&gt;&lt;/span&gt;
              &lt;span class="tab-label"&gt;Direction&lt;/span&gt;
       &lt;/a&gt;
       &lt;a class="tab-item" href="#searchModal"&gt;
              &lt;span class="icon icon-search"&gt;&lt;/span&gt;
              &lt;span class="tab-label"&gt;Search&lt;/span&gt;
       &lt;/a&gt;
&lt;/nav&gt;
 
 &lt;div id="routeModal" class="modal"&gt;
              &lt;header class="bar bar-nav"&gt;
                     &lt;a class="icon icon-close pull-right" href="#routeModal"&gt;&lt;/a&gt;
                     &lt;h1 class="title"&gt;Search Route&lt;/h1&gt;
              &lt;/header&gt;
              &lt;div class="content"&gt;
                  &lt;form method="post" id="routeForm"&gt;
                      &lt;input type="text" placeholder="From" id="origin" name="origin"&gt;
                     &lt;input type="text" placeholder="To" id="dest" name="dest"&gt;
                      &lt;button class="btn btn-positive btn-block"&gt;Show Route&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
       &lt;/div&gt;</pre>
Tampilan menu sekarang berikut form pencarian rute akan nampak seperti gambar berikut:

<img class="alignnone size-full wp-image-12781" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/1011.jpg" alt="1011" width="536" height="468" />

Terakhir tambahkan kode berikut untuk mencari lokasi awal dan lokasi tujuan dan menampilkan garis rute dari dua lokasi tersebut:
<pre>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');
});</pre>
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.

<img class="alignnone size-full wp-image-12782" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/09/1213.jpg" alt="1213" width="593" height="344" />
<h2>Penutup</h2>
Pada tutorial di atas kita sudah menggunakan framework CSS Ratchet yang boleh dibilang cukup untuk menjadi dasar tampilan aplikasi mobile sederhana disamping framework bawaan Tizen yakni framework Tizen Advanced UI (TAU). Kita juga sudah menggunakan library Gmaps.js yang memiliki banyak fitur lagi yang bisa dieksplorasi untuk mendukung dan memperkaya fitur aplikasimu.

Integrasi Google Maps pada Aplikasi Mobile Web Tizen

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Integrasi Google Maps pada Aplikasi Mobile Web Tizen

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino