Cara Mudah Membuat Aplikasi Google Maps Dengan JQuery Gmap3

Ceritanya begini, kan awalnya dapet tantangan membuat aplikasi peta menggunakan google maps. Yah semacam GIS atau Sistem Informasi Geografis gitu gan. Nah, masalahnya saya gak punya skill sama sekali buat bikin program peta kayak gitu. Gak gitu aja, fitur yang diminta cukup kompleks dan cukup bikin saya gak bisa tidur gara-gara kepikiran sama tantangan. Apalagi waktu pertama kali buka dokumentasi Google Maps di https://developers.google.com/maps/documentation/javascript/tutorial rasanya mau nangis aja.
Lalu saya teringat akan sebuah nasehat seorang Ulama' terkenal di republik ini, kata beliau:

"Orang yang pesimis adalah orang yang sudah mengubur sebelah kakinya sebelum melangkah."

Langsung saat itu saya cari jalan keluar, browsing sana sini dan akhirnya ketemu sama JQuery Gmap3. Sebuah plugin JQuery yang dapat membantu kita yang ingin membuat aplikasi maps berbasis Google Maps tapi tidak tahu harus mulai dari mana. Silakan teman-teman mengunjungi situs resminya di http://gmap3.net/ untuk download library yg dibutuhkan


Memulai, Apa dan bagaimana?
Pastikan teman-teman mencoba tutorial ini saat terkoneksi dengan internet karena kita akan menggunakan google maps.


1. Pertama, kita buat folder untuk percobaan. Siapkan library JQuery dan dan Gmap3 yang sudah teman-teman download dalam folder tadi. belum download?? ya udah, silakan download disini :

• http://gmap3.net/en/upload/gmap3/gmap3-6.0.0.zip
• http://code.jquery.com/jquery-1.11.1.min.js -> Klik Kanan -> Save Link As... -> simpan di folder yang tadi kita buat

2. Kedua,bikin file baru dengan nama maps.html atau terserah teman-teman apa namanya, saya mah ikut aja. Buka file tadi dengan editor kesayangan teman-teman, mau Notepad, Notepad++, Geany,GEdit, nano, vim dll. Yang perlu kita lakukan adalah memanggil file JQuery, Gmap3 dan Google Maps API kedalam file kita.

3. Ketiga, buat sebuah kotak dengan menggunakan tag DIV, jangan lupa mengatur tinggi dan lebar kotaknya

4. Keempat, kita buat panggil fungsi Gmap3-nya untuk menampilkan peta.

Untuk menyesuaikan peta dengan apa yang kita inginkan seperti lokasi yang akan ditampilkan, perbesaran gambar peta (zoom), tipe peta dapat kita sesuaikan dengan menambahkan beberapa pengaturan seperti berikut ini:

Lebih jelasnya silakan teman2 kunjungi situs resmi Gmap3 di alamat http://gmap3.net/, disana dijelaskan panjang lebar tentang cara penggunaan Gmap3 ini. Biar kamu gak penasaran juga, silakan download contoh sederhana yang saya buat: Download Contoh

Seperti biasa, jangan komentar untuk menyampaikan kritik dan saran. Salam Blogger Madura!