Membuat Info Content Windows Google Maps Menggunakan Popup Windows “Modals”

ByYusuf Ayuba

Membuat Info Content Windows Google Maps Menggunakan Popup Windows “Modals”

Melanjutkan artikel sebelumnya yang berjudul Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter, kali ini saya mencoba untuk membuat tampilan detail informasi yang ada di masing-masing koordinat di peta dalam bentuk Popup windows/Modals.


Sebenarnya library Google Maps dari Biostall yang saya gunakan dalam artikel ini sudah tersedia parameter “infowindow_content” yang bisa digunakan untuk menampilkan informasi detail dari setiap koordinat yang ada di peta tersebut. Namun secara pribadi saya kurang menyukai parameter bawaan library ini dikarenakan parameter tersebut tidak bisa menampilkan beberapa informasi sekaligus yang ada dalam satu koordinat. Jadi misal dalam satu koordinat terdapat 2 atau lebih informasi, maka yang ditampilkan dalam hanya satu informasi saja. Mari kita lihat gambar dibawah ini

Dari gambar diatas, kita bisa lihat bahwa untuk lokasi SOHO, SULAWESI TENGAH diisi oleh 3 (tiga) data alumni. Akan tetapi dengan menggunakan parameter “infowindow_content” detail informasi yang ditampilkan dalam peta 1 (satu) data saja. Karena alasan inilah saya memiliki pendapat seperti diatas dan sebagai gantinya saya menggunakan Modals untuk menampilkan detail informasi yang ada di setiap koordinat. Untuk menampilkan popup dalam bentuk Modals, kita akan gunakan parameter onclick di setiap koordinat yang ada di peta.

Well, tanpa berpanjang lebar lagi, mari kita praktekkan bagaimana membuat Popup windows untuk menampilkan detail informasi yang ada di setiap koordinat peta.
Karena artikel ini lanjutan dari artikel Membuat Peta Sebaran Alumni dengan GMaps dan Codeigniter, maka saya hanya akan memodifikasi dan menambahkan beberapa fungsi di source code yang sudah ada.

Untuk mengikuti artikel ini, anda sudah harus bisa memahami atau bahkan sudah bisa membuat peta wilayah seperti yang ada di artikel pertama

Langkah pertama, kita tambahkan fungsi baru di file Alumni_model.php seperti dibawah ini

Fungsi diatas digunakan untuk mengambil data wilayah berdasarkan id_wil yang ada di setiap koordinat peta. Setelah itu, tambahkan fungsi dibawah ini di controllers Welcome.php

Fungsi diatas digunakan untuk menampilkan Popup windows dalam bentuk Modals yang berisikan informasi detail dalam bentuk modal berdasarkan informasi id_wil yang ada di setiap koordinat peta.
Selanjutnya masih di controllers Welcome.php, hapuslah beberapa baris $marker[‘infowindow_content’] dan $marker[‘title’] yang di fungsi maps(), atau bisa juga disable baris-baris tersebut. Selain itu di fungsi maps() ini kita tambahkan baris baru yaitu parameter onclick yang berfungsi untuk memanggil sebuah fungsi yang ada di javascript. Detail codingnya seperti dibawah ini

Berikutnya kita modifikasi file maps_view.php yang ada di folder Application/views. Tambahkan beberapa baris berikut sebelum tag penutup body.

Sampai tahap diatas, aplikasi sudah bisa dijalankan akan tetapi untuk memperindah lagi, silahkan download icon style Font Awesome dari situs https://fortawesome.github.io/Font-Awesome.

Berikut coding lengkap masing-masing file

View Demo

About the author

Yusuf Ayuba administrator

Leave a Reply

%d bloggers like this: