Google Map dengan Geolocation

Sebagaimana kita tahu HTML5 memiliki fitur Geolocation yang sudah ada pada kebanyakkan browser terbaru. API ini menyediakan informasi kepada tentang lokasi dari browser lewat beberapa sumber, ini sangat memudahkan penguna. Dari sana tentu menarik menggabungkannya dengan Google Maps. Kita ingin pada saat membuka web page kita bisa mendapatkan posisi awal peta dari posisi dimana penguna itu berada.

Caranya sangat sederhana. Kita hanya perlu memanggil fungsi yang di object navigator.geolocation. Dalam kontek kita adalah fungsi getCurrentPosition. Data yang kita perlukan ada di property coords. Dan cukup itu saja.

alt text

Memanggil fungsi getCurrentPosition, secara automatis akan mengaktifkan fitur Geolocation di-browser. Oleh karena itu pada saat kita memanggil halaman web yang menggunakan ini, kita akan dimunculkan pilihan untuk memperbolehkan(atau tidak) browser untuk menggunakan fitur itu. Adanya pilihan ini bagus, karena penguna akan secara sadar memberikan permisi kepada browser. Kita tidak ingin begitu saja memberikan informasi lokasi kita kepada website yang kita tidak percaya.

alt text

Kita menambahkan marker dari Google Maps yang lokasinya didapat dari Geolocation. Hasilnya muncul seperti yang diharapkan.

Pembaca tentu heran, yakin itu lokasi penulis? Itu khan di-Antartika. Memang penulis sedang duduk dibalok es.

alt text

Yakin kok penulis bahwa itu lokasi yang tepat. Lebih tepatnya lokasi itu adalah Larsen Ice Shelf, yang baru-baru ini pecah dan hanyut ke laut. Jadi penulis lagi hanyut donk!

alt text

Tenang penulis masih di Indonesia. Ini bagian dari simulasi lokasi yang ada di Google Chrome. Simulator ini berguna bagi developer untuk mengetes masalah Geolocation. Tidak mungkin pergi ke lokasi yang sebenarnya di seluruh dunia hanya untuk melakukan tes — tapi alasan bagus buat jalan-jalan.

Untuk mengakses tool ini, dari developer window ke tab console. Dari sana kita pilih Show console drawer.

alt text

Kemudian kita pilih menu Sensors.

alt text

Pada Geolocation dropdown pilih Custom location… dan kita masukkan lokasi tujuan Geolocation. Mudah bukan.

alt text

Penutup

Menggunakan Geolocation API adalah mudah dan juga menghubungkan dengan Google Maps sama mudahnya. Apalagi adanya bantuan dari Google Chrome Developer untuk mesimulasi sebagai bagian tes, sungguh memanjakan developer. Tinggal bagaimana menggunakan ini semua sebagai kreasi yang kreatif.