author Ahmad Muhardian

Mengatasi Malsalah Posisi Titik Tengah Google Maps pada Modal


Saat membuat Google Maps pada Modal di template Admin LTE, ada masalah yang membuat saya bingung.

Posisi titik tengah Google maps selalu berada di pojok kiri atas. Meskipun saya sudah set titik tengahnya pada trigger event resize, namun tetap saja posisinya berada di pojok kiri atas.

Posisi titik tengah google maps di pojok

Setelah digeser:

Posisi titik tengah setelah digeser

Sementara itu, kode yang saya gunakan saat event modal ditampilkan.

$("#modal-peta").on("shown.bs.modal", function() {
    
     google.maps.event.trigger(peta, "resize", function() {
         peta.setCenter(peta.getCenter());
     });

});

Ternyata ada yang salah dengan kode tersebut.

Setelah saya telusuri dengan kata kunci “Google Maps center top left” di Google, saya menemukan jawabanya.

Ternyata saya salah dalam meletakan fungsi untuk mengatur posisi tenganya.

Kalau kita perhatikan kode di atas, fungsi setCenter() akan dipanggil ketika peta di-resize.

Seolusinya:

Fungsi setCenter() harus dipanggil ketika modal ditampilkan, bukan saat peta di-resize. Sehingga kodenya akan menjadi seperti ini:

$("#modal-peta").on("shown.bs.modal", function() {

    // ambil dulu titik tengahnya
    var tengah = peta.getCenter();
    
    // resize
    google.maps.event.trigger(peta, "resize");
    
    // set ulang titik tengah
    peta.setCenter(tengah);

});

Hasilnya:

Posisi tengah google maps di modla

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

Baca Juga ini

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

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 karna itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.

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

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: Info Window dapat kita isi dengan kode HTML. Sehingga data yang ditampilkan di dalam jendela Info Window bisa kita berikan style CSS agar terlihat menarik. Cara Membuat Info WindowPertama yang harus kita buat adalah isi atau informasi yang akan kita tampilkan di dalam info window.

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM. DOM merupakan metode yang digunakan oleh Javascript untuk...

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

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

Google Maps merupakan produk Google yang memungkinkan kita melihat peta dari seluruh dunia. Bahkan tidak hanya peta, Google Maps juga menyediakan Citra dari beberapa lokasi bangunan, jalan, dan lain-lain. Apa itu Google Maps API?Google Menyediakan Google Maps API yang memungkinkan kita membangun aplikasi dengan memanfaatkan Google Maps. Google Maps API (Application Programming Interface) merupakan sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam aplikasi yang kita bangun.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.