dijexi.com

Image by Telendro via Flickr

Setup API Key

Untuk dapat menggunakan Google Map API pada suatu aplikasi, kita perlu mendapatkan Key yang bisa diperoleh secara gratis dari Google. Key ini hanya berlaku untuk satu URL, jadi setiap kali kita pindahkan aplikasi tersebut dari suatu server ke server lain, maka kita perlu mendapatkan key lainnya untuk server tersebut.

Key tersebut dapat diperloleh melalui URL di bawah ini:

http://www.google.com/apis/maps/signup.html

Ketika URL tersebut dibuka akan muncul halaman yang pada saat buku ini ditulis, tampilannya adalah sebagai berikut:

Selanjutnya, cara melakukan registrasi key adalah:

• Masukkan URL website tempat anda meletakkan program yang mengakses Google Map API pada kolom My web site URL, misalnya http://localhost/gmaptest. Anda perlu mendaftarkan satu API Key untuk setiap domain.
• Klik tombol Generate API Key. Simpan key yang diperoleh, berupa XXX karakter yang telah di-encrypt. Key ini akan digunakan pada saat inisialisasi Google Map pada aplikasi kita dan berlaku hanya untuk URL yang diregistrasikan

Memulai Membuat Aplikasi Google Map

Buat satu file HTML baru, katakanlah test-01.html. Ketikkan isinya sebagai berikut.

Baris-baris kode di atas sebenarnya adalah kode HTML standard yang memiliki kode Javascript.

Semua akses yang digunakan untuk memanipulasi dan menggunakan Google Map tersimpan secara online pada server Google dan hanya dapat diakses ketika kita sudah memiliki key yang benar untuk URL yang kita gunakan. Hal ini dilakukan pada baris 6. Anda harus mengganti bagian key=abc, ganti abc menjadi key yang anda peroleh ketika registrasi pada Google Map. Jika key yang anda gunakan tidak sesuai maka akan ditolak oleh Google.

Terdapat function javascript load() yang akan dipanggil pada saat halaman tersebut selesai didownload oleh browser.

Function load() berguna untuk menginisialisasi Google Map. Hal yang dilakukan di sini adalah:

• Baris 15, mengecek apakah browser yang kita gunakan dapat menampilkan Google Map atau tidak, jika ya maka lanjut ke proses berikutnya. Function GbrowserIsCompatible() digunakan untuk hal ini, dan merupakan function yang terdapat pada Google Map API
• Baris 17, mendefinisikan variable object dengan nama map yang merupakan representasi object Google Map, yaitu GMap2(). Object ini diinisialisasi menggunakan elemen DIV yang nantinya akan menampung tampilan peta Google Map, dalam hal ini adalah parameter yang digunakan pada function javascript document.getElementById(”map”). Artinya nantinya kita harus memiliki elemen DIV yang bernama map.

Pada baris 18 dipanggil method setCenter() yang dimiliki oleh object map. Method ini berfungsi untuk menentukan titik pusat tampilan peta. Parameternya adalah koordinat titik pusat dan level zoom. Koordinat titik pusat terlebih dahulu dibuat menggunakan object GLatLon() yang memiliki parameter latitude dan longitude koordinat yang diinginkan. Sementara level zoom adalah angka integer yang menentukan seberapa dalam level zoom peta yang ingin dimunculkan. Dalam hal ini kita gunakan level 12.

Pada baris 25 dapat dilihat definisi tag BODY HTML yang akan memanggil function javascript load() yang telah didefinisikan sebelumnya.

Pada baris 26 terdapat definisi tag HTML DIV yang bernama map yang akan digunakan sebagai tempat menampilkan object Google Map. Kita dapat merubah ukurannya disini dengan mengganti width dan height pada atribut style yang terdapat di sana. Namun yang penting adalah atribut id harus sama dengan yang dipanggil pada saat inisialisasi object Google Map pada baris 17 di atas.

Jika semua berjalan sebagaimana mestinya, maka hasilnya akan terlihat seperti gambar di bawah.

Men-center map pada suatu titik

Untuk memindahkan titik pusat peta Google Map dapat dilakukan dengan memanggil method setCenter(). Parameter method ini adalah koordinat yang diinginkan sebagai titik pusat dan level zoom.

Koordinat titik pusat harus berupa object berjenis GLatLng yang dapat dengan mudah dibuat menggunakan object GLatLng(). Parameter object GLatLng() adalah koordinat dalam latitude dan longitude yang diinginkan. Hasil dari object ini dapat ditampung dalam satu variable yang akan berjenis GLatLng. Object variable berjenis ini dapat langsung dipakai sebagai parameter dari method setCenter().

Parameter setCenter() selanjutnya adalah level zoom yang berupa nilai integer. Parameter ini menentukan seberapa dalam peta akan dimunculkan. Semakin besar level zoom nya maka semakin dalam peta akan dimunculkan. Angka zoom level mulai dari 0 (seluruh dunia) s.d 19 (paling detil).

Contohnya adalah sebagai berikut.

Menambah Marker

Marker adalah simbol atau icon yang dapat diletakkan di atas peta Google Map. Icon tersebut dapat berupa file gambar maupun icon default bawaan Google Map.

Untuk meletakkan marker di atas peta Google Map, kita perlu membuat object berjenis GMarker yang dapat dilakukan dengan mudah dengan mendefinisikan variabel object dengan fungsi GMarker().

Parameter dari fungsi GMarker() adalah koordinat dimana marker tersebut akan dimunculkan. Parameter ini harus berupa object dengan jenis GLatLng yang dapat dibuat dengan mudah melalui GLatLng() yang sudah kita lakukan sebelumnya.

Setelah object Marker berhasil dibuat, maka object tersebut dijadikan parameter dari method addOverlay() yang terdapat pada object map Google Map. Method ini akan menampilkan icon marker pada koordinat yang telah ditentukan sebelumnya.

Sebagai contoh buatlah file test-02.html seperti di bawah ini dan perhatikan baris-baris yang berhuruf tebal.

Jika semua berhasil, maka tampilan file diatas adalah sebagai berikut.

Menambah Marker dengan kotak informasi

Marker dapat dilengkapi dengan kotak informasi yang biasanya berupa infromasi lengkap tentang marker tersebut. Hal ini dapat ditambahkan pada saat kita mendefinisikan object marker itu dengan memanggil method openInfoWindowHtml() pada object marker tersebut.

Paremeter dari method ini adalah isi keterangan yang hendak dimunculkan pada kotak informasi dan berupa kode-kode HTML.

Sebagai contoh, buat file test-03.html seperti di bawah ini, perhatikan baris-baris yang berhuruf tebal.

Perhatikan juga pada baris 21 kita menggunakan parameter map.getCenter() pada saat membuat object GMarker. Ini berarti kita menggunakan koordinat yang dihasilkan oleh method getCenter() dari object map untuk dijadikan parameter GMarker(). Object koordinat yang dihasilkan oleh getCenter() adalah koordinat titik pusat peta pada saat itu. Koordinat ini bisa berubah setiap saat jika kita menggeser atau men-zoom peta dengan mouse atau dengan sengaja diprogram menggunakan setCenter().

Jika semua berjalan dengan benar, maka tampilan dari kode di atas adalah sebagai berikut.

Memilih Jenis Map

Google Map memiliki tiga jenis peta yang dapat ditentukan dengan memanggil method setMapType(). Type map yang tersedia adalah:

• G_NORMAL_MAP berupa peta jalan/ digital, terdiri dari jalan, batas wilayah, nama jalan, nama tempat, dan sebagainya. Hanya beberapa negara saja yang sudah ada peta digitalnya pada Google Map.
• G_SATELLITE_MAP berupa foto satelit. Semua tempat dimuka bumi ini telah difoto melalui satelit dan dapat diakses melalui Google Map. Namun beberapa tempat masih berupa foto dengan resolusi rendah sementara beberapa tempat sudah berupa foto dengan resolusi tinggi.
• G_HYBRID_MAP adalah gabungan peta digital dan foto satelit
• G_DEFAULT_MAP_TYPES berisi array dari ketiga jenis di atas
• G_PHYSICAL_MAP menampilkan peta fisik berdasarkan informasi terrain

Hal yang perlu diperhatikan pada pemanggilan method ini adalah bahwa method ini harus dipanggil setelah pemanggilan method setCenter() atau zoom().

Sebagai contoh, buatlah file dengan nama test-05.html dan dengan source code seperti di bawah ini. Perhatikan baris-baris yang berhuruf tebal.

Kita dapat mengedit bari 19 dengan merubah jenis peta menjadi G_NORMAL G_SATELITTE_TYPE, atau G_HYBRID_TYPE. Untuk peta dengan jenis G_NORMALuntuk daerah-daerah tertentu, jika kita men-zoom terlalu dalam maka mungkin kita tidak dapat melihat peta yang dimaksud. Ini karena Google Map belum memiliki peta pada level zoom tersebut untuk daerah yang kita pilih.

Contoh tampilan peta dengan type hybrid adalah sebagai berikut.

Menambah Data Marker dari URL

Marker dapat ditambahkan pada Google Map secara dinamis dari suatu data, dimana misalnya kita memiliki file data yang berisi informasi koordinat banyak marker yang akan dimunculkan pada Google Map.

Untuk hal ini kita perlu menjalankan function GDownloadUrl() yang digunakan untuk men-download data dari suatu URL file yang berisi data XML. Data XML yang diterima kemudian diparsing oleh object Google Map GXml. Object ini memiliki method parse() yang berguna untuk melakukan parsing data XML.

Setelah dilakukan parsing, maka akan didapatkan data XML yang siap untuk dibaca isinya.

Contohnya, buatlah file misalnya test-06.html dengan source code seperti di bawah ini. Perhatikan baris-baris yang berhuruf tebal.

Pada baris 21, kita menjalankan function GDownloadUrl(). Function ini memiliki dua parameter yaitu lokasi URL file yang akan didownload, yaitu data.xml dan function yang akan meng-handle data dan responseCode yang diterima setelah dilakukan proses download. Kedua data itu sudah otomatis tersedia dan dijadikan sebagai parameter dari function handler tersebut sehingga dapat dibaca di dalam function.

Pada baris 22 dilakukan pemanggilan method parse() yang terdapat pada object GXml. Hasil parsing data XML tersebut disimpan dalam variabel xml yang merupakan object yang memiliki struktur data XML yang siap dibaca oleh proses lainnya. Proses ini misalnya mencari key dan value suatu elemen tertentu dengan mudah.

Pada baris 23, kita membaca elemen XML yang bernama marker. Elemen ini harus tersedia pada data XML yang didownload sebelumnya yaitu pada file data.xml. Hasil pembacaan disimpan pada array yang kita beri nama markers. Ini adalah array javascript biasa yang dapat dihitung jumlah elemennya dengan property length, atau diakses setiap elemennya melalui indexnya, yaitu dengan tanda kurung siku. Misalnya untuk mengakses elemen pertama maka digunakan notasi markers[0].

Pada baris 24, kita melakukan perulangan mulai dari 0 sampai dengan banyaknya elemen array markers. Selama perulangan tersebut, kita membuat object yang diberinama point yang merupakan object GLatLng dengan koordinat latitude dan longitude yang diambil dari data XML. Informasi tersebut kita dapatkan dari elemen array markers dengan memanggil method getAttribute(). Artribut yang kita panggil untuk setiap elemen tersebut adalah atribut lat dan lng. Function parseFloat() digunakan untuk menkonversi data string menjadi data dengan type float yang diperlukan untuk membuat object GLatLng.

Pada baris 28, setelah object point berhasil dibuat, maka object tersebut digunakan sebagai parameter untuk pembuatan object baru yaitu GMarker. Object GMarker ini kemudian dijadikan parameter untuk method addOverlay() dari object map Google Map sehingga Google Map akan menampilkan marker baru pada koordinat yang ditentukan pada point.

Setelah perulangan selesai sampai dengan jumlah elemen array markers, maka pada baris 30 dipanggil method setCenter() dari object map untuk menentukan koordinat titik tengah tampilan peta Google Map.

Contoh data.xml yang digunakan untuk proses di atas adalah sebagai berikut:

Jika semua berjalan semestinya, maka tampilannya dari kode diatas adalah sebagai berikut.

Memindahkan Marker

Kadang kita perlu untuk memindahkan posisi sebuah marker yang sudah ada sebelumnya. Namun sayangnya Google Map belum menyediakan fasilitas ini, misalnya marker.move() atau map.moveMarker().

Untuk keperluan ini kita perlu melakukan:

1. penghapusan marker yang sudah ada, dilakukan dengan method clearOverlays() yang terdapat pada object map Google Map.
2. pembuatan marker baru menggantikan marker yang sudah dihapus sehingga didapatkan efek perpindahan marker dari suatu koordinat ke koordinat lain.

Berikut ini adalah contoh program untuk memindahkan marker.

Demikian dasar-dasar pengembangan aplikasi web menggunakan Google Map API. Sampai ketemu pada aplikasi berikutnya tentang membuat aplikasi GPS tracking.

Referensi:

• Dokumentasi Google Map API: http://code.google.com/apis/maps/documentation/introduction.html
• Google Map API Playground: http://code.google.com/apis/ajax/playground

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc