author Ahmad Muhardian

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal


Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif.

Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini.

Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karena itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.

Bootstrap 3:

$("#modal-peta").on(“shown.bs.modal”, function () {
      google.maps.event.trigger(peta, “resize”);
});
Bootstrap 2:
$(’#modal-peta’).on(‘shown’, function () {
     google.maps.event.trigger(peta, “resize”);
});
#modal-peta adalah nama id dari elemen modal tempat peta tersebut ditampilkan dan variabel peta adalah variabel objek dari peta (Google Maps). Kode di atas, ditulis dalam fungsi initialize() atau persiapan peta, lihat tutorial sebelumnya.


Referensi: http://stackoverflow.com/a/11743005