From 047e543d8d09510769014a72d156116eedb6fbe8 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Tue, 18 Mar 2025 07:25:27 +0700
Subject: [PATCH] feat(bank-data): tambahkan info window untuk marker peta

- Menambahkan array untuk menyimpan info window.
- Membuat konten info window yang menampilkan detail aset.
- Menambahkan event listener untuk marker agar info window terbuka saat marker diklik.
- Menutup semua info window yang terbuka saat marker baru diklik.
---
 resources/views/bank-data/index.blade.php | 33 ++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/resources/views/bank-data/index.blade.php b/resources/views/bank-data/index.blade.php
index 992a893..dc6b59b 100644
--- a/resources/views/bank-data/index.blade.php
+++ b/resources/views/bank-data/index.blade.php
@@ -173,6 +173,7 @@
     <script>
         let map;
         let markers = [];
+        let infoWindows = [];
         let dataTable;
 
         function initMap() {
@@ -183,10 +184,11 @@
         }
 
         function updateMapMarkers(data) {
-            console.log(data);
             // Clear existing markers
             markers.forEach(marker => marker.setMap(null));
+            infoWindows.forEach(infoWindow => infoWindow.close());
             markers = [];
+            infoWindows = [];
 
             // Add new markers
             data.forEach(item => {
@@ -213,7 +215,36 @@
                             map: map,
                             title: item.jenis_aset
                         });
+
+                        // Create info window content
+                        const contentString = `
+                    <div>
+                        <h3>${item.jenis_aset}</h3>
+                        <p>Tanggal: ${item.tanggal}</p>
+                        <p>Tahun: ${item.tahun}</p>
+                        <p>Luas Tanah: ${item.luas_tanah} m²</p>
+                        <p>Luas Bangunan: ${item.luas_bangunan} m²</p>
+                        <p>Harga: ${window.formatRupiah(item.harga)}</p>
+                        <p>Nilai Pasar: ${window.formatRupiah(item.nilai_pasar)}</p>
+                    </div>
+                `;
+
+                        // Create info window
+                        const infoWindow = new google.maps.InfoWindow({
+                            content: contentString
+                        });
+
+                        // Add click event to marker
+                        marker.addListener('click', () => {
+                            // Close all open info windows
+                            infoWindows.forEach(window => window.close());
+                            // Open this marker's info window
+                            infoWindow.open(map, marker);
+                        });
+
                         markers.push(marker);
+                        infoWindows.push(infoWindow);
+
                     } else {
                         console.error('Invalid location format for item:', item);
                     }