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”); });

Tutorial Google Maps API: Cara Menggunakan Info Window untuk Menampilkan Informasi

Info Window adalah objek yang digunakan untuk menampilkan informasi pada suatu titik koordinat tertentu. Biasanya digunakan bersamaan dengan marker. Contoh Info Window:

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Menampilkan Peta Google Map di dalam Web

Tutorial CSS: Membuat Style untuk Badge Notifikasi

Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung. Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesuai seperti harapan, maka kita harus membuatnya sendiri. Kode CSS.badge-notif { position:relative; } .badge-notif[data-badge]:after { content:attr(data-badge); position:absolute; top:-10px; right:-10px; font-size:.7em; background:#e53935; color:white; width:18px; height:18px; text-align:center; line-height:18px; border-radius: 50%; }

Ini yang Saya Lakukan untuk Munguasai Dasar Bahasa Python dalam Sebulan