Contoh Sederhana Google Maps API Places Search, Marker Click, dan GeoLocation

Saya bilang sederhana karena ini hanya menggabungkan dan tidak perlu jQuery, hanya perlu Google Maps API dan sedikit Javascript. Awalnya karena saya ingin menggabungkan kombinasi 3 fitur sebagai input method di website, yaitu Places search, Marker click, dan GeoLocation. Saya sempat explore di Google, tidak menemukan tutorial yang sesuai. Sedangkan contoh yang disediakan Google maps masing-masing terpisah. Yang perlu saya lakukan adalah hanya menggabungkannya.

Contoh Google maps places search autocomplete ini mungkin cocok jadi awal referensi. Di situ ada tipe cariannya, yaitu all, establishment, dan address. Saya tidak perlu itu. Set saja pada semua carian dan hilangkan radio buttonnya.

Untuk marker click bisa lihat di sini atau nyontek dari dari sumber lain juga ga masalah. Contoh yang diberikan Google agak kurang lengkap. Jadi harus nambahin di Javascriptnya.

Dan yang terakhir GeoLocation atau contoh dari W3school juga bagus. Event onclick button diperlukan supaya pengguna dapat memilih dari ketiga fitur, apakah menggunakan search atau GeoLocation. Dan pengguna bisa menyesuaikan dengan marker click kalau koordinatnya masih kurang sesuai.

Nah, sekarang kalau sudah jadi, buat dua input text untuk koordinat lat dan long. Buat scriptnya untuk mrngupdate setiap ada event perubahan. Koordinat lat dan long ini adalah hasil dari input method yang nantinya bisa disimpan ke dalam database.

Kelamaan bla bla bla, jadi berikut contoh jadinya. Untuk source-nya, tinggal view source. Selamat mencoba.

Terbit di Iseng, Programming, Tutorial dan ditag , , , .

2 Comments

  1. maaf mau Tanya, saya mau buat yg autocomplete, tapi setelah saya copy ke program baru kenapa tidak biss ya? padahal saya sudah pakai API key. List ketika diinput nya tidak muncul

    apakah untuk autocompete tidak bias dipakai di localhost? mohon penjelasannya, terimakasih 🙂

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *