Official StoreTekan tombol di atas untuk membeli semua alat dan bahan eksperimen di web ini

Menampilkan Info Window di Google Maps dengan Javascript

Google Maps adalah peta online yang disediakan gratis oleh Google (walaupun ada versi berbayarnya juga). Seluruh source code-nya tersedia gratis di internet. Tinggal bagaimana kitanya aja bisa memanfaatkan atau tidak. Artikel sebelumnya sudah membahas tentang

Cara menampilkan Google Maps dengan Javascript

Cara menampilkan marker di Google Maps dengan Javascript

Berikut ini akan saya tulis sedikit tutorial tentang bagaimana cara Menampilkan Info Window di Google Maps dengan Javascript. Apa itu “Info Window”? Info Window kalau kita terjemahkan menjadi ‘Jendela informasi’. Info window/jendela informasi ini biasanya digunakan untuk menampilkan informasi detail yang berhubungan dengan marker. Kan tidak mungkin juga bukan, kita menuliskan informasi langsung ke petanya. Selain akan mengakibatkan peta menjadi ‘kumuh’, juga aplikasi web kita menjadi kurang interaktif. Lebih baik jika user ingin menampilkan informasi detail baru kita tampikan informasi tersebut melalui info window.

Cara Menampilkan Info Window di Google Maps

Untuk menampilkan info window di Google Maps caranya cukup mudah. Anda bisa langsung menampilkannya atau atau setelah marker diklik/ditekan. Untuk yang pertama (langsung menampikan info window), Anda dapat langsung memanggil script berikut ini

Perhatikan bahwa untuk menampilkan info window, Anda harus menciptakan sebuah instance dari class google.maps.InfoWindow dengan parameter ‘content’ yang berisi informasi yang nantinya akan ditampilkan di kotak dialog di web. Dengan script sederhana di atas, hasilnya adalah sebagai berikut:

menampilkan-info-window-di-google-maps-dengan-javascript

Sekarang kita akan coba meng-advanced tampilan web peta online kita. Kali ini kita akan menampilkan info window setelah marker di klik (jadi tidak langsung ditampikan ketika web di-reload). Untuk case seperti ini tentunya yang kita butuhkan adalah mendeteksi event onClick milik marker. Bagaimana caranya melakukannya menggunakan Javascript? Ternyata mudah sekali, cukup hanya menambahkan satu baris berikut, keinginan Anda sudah terwujud 🙂

Jadi untuk mendeteksi event onClick di Google Maps, cukup dengan mendeklarasikan function ‘google.maps.event.addistener(a,b,c)’ dengan parameter a=‘objek yang dideteksi’, b=‘event apa’, c=‘aksi yang dilakukan’ . Untuk case kita di atas, parameter ‘aksi yang dilakukan’ adaah menampilkan info window. Untuk hasilnya, tampilannya akan sama persis dengan gambar di atas, hanya saja info window baru muncul jika marker ditekan.

Berikut ini adalah source code lengkapnya

Download source code di atas  di sini

Simpan source code di atas dengan nama ‘infowindow.html’ dan letakkan di folder c:/xampp/htdocs/tutorial’. Untuk melihat hasilnya, buka web browser kesayangan Anda dan ketikkan localhost/tutorial/infowindow.html di address bar web browser Anda tersebut (silahkan lihat gambar di atas jika masih bingung).

Demikian sedikit tutorial tentang cara menampilkan Info Window di Google Maps dengan Javascript, semoga membantu Anda yang sedang mencari info tentangnya.

Incoming search terms:

menampilkan detail di gmaps dengan javascript

Add a Comment

Your email address will not be published. Required fields are marked *

error: Content is protected !!