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.
This commit is contained in:
@@ -173,6 +173,7 @@
|
|||||||
<script>
|
<script>
|
||||||
let map;
|
let map;
|
||||||
let markers = [];
|
let markers = [];
|
||||||
|
let infoWindows = [];
|
||||||
let dataTable;
|
let dataTable;
|
||||||
|
|
||||||
function initMap() {
|
function initMap() {
|
||||||
@@ -183,10 +184,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateMapMarkers(data) {
|
function updateMapMarkers(data) {
|
||||||
console.log(data);
|
|
||||||
// Clear existing markers
|
// Clear existing markers
|
||||||
markers.forEach(marker => marker.setMap(null));
|
markers.forEach(marker => marker.setMap(null));
|
||||||
|
infoWindows.forEach(infoWindow => infoWindow.close());
|
||||||
markers = [];
|
markers = [];
|
||||||
|
infoWindows = [];
|
||||||
|
|
||||||
// Add new markers
|
// Add new markers
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
@@ -213,7 +215,36 @@
|
|||||||
map: map,
|
map: map,
|
||||||
title: item.jenis_aset
|
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);
|
markers.push(marker);
|
||||||
|
infoWindows.push(infoWindow);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
console.error('Invalid location format for item:', item);
|
console.error('Invalid location format for item:', item);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user