WD - Dev
90 lines
3.7 KiB
PHP
90 lines
3.7 KiB
PHP
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-2 mb-2">
|
|
<img src="dist/img/ODP.png" class="mr-2" width="25px"><span>Topologi</span>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<img src="dist/img/ON.png" class="mr-2" width="25px"><span>Aktif / Connected</span>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<img src="dist/img/OF.png" class="mr-2" width="25px"><span>Aktif / Disconnected</span>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<img src="dist/img/ON1.png" class="mr-2" width="25px"><span>Tidak Aktif / Connected</span>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<img src="dist/img/OF1.png" class="mr-2" width="25px"><span>Tidak Aktif / Disconnected</span>
|
|
</div>
|
|
</div>
|
|
<div id="map" style="height: 90vh; width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
let map; // Variabel untuk menyimpan peta
|
|
const markers = []; // Array untuk menyimpan marker
|
|
|
|
function initMap() {
|
|
// Inisialisasi peta dengan tipe hybrid
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: { lat: -7.062083, lng: 106.797390 }, // Pusat peta
|
|
zoom: 11,
|
|
mapTypeId: 'hybrid' // Menentukan tipe peta menjadi hybrid
|
|
});
|
|
|
|
// Fetch data dari PHP saat pertama kali
|
|
fetchMarkers();
|
|
|
|
// Mengatur interval untuk memperbarui marker setiap 10 detik
|
|
setInterval(fetchMarkers, 30000);
|
|
}
|
|
|
|
function fetchMarkers() {
|
|
fetch('load/maps_marker.php?i=<?php echo base64_encode($SqlDataWHIdM); ?>')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(markersData => {
|
|
// Hapus marker yang ada sebelumnya
|
|
markers.forEach(marker => marker.setMap(null));
|
|
markers.length = 0; // Kosongkan array marker
|
|
|
|
// Tambahkan marker baru ke peta
|
|
markersData.forEach(markerData => {
|
|
const markerInstance = new google.maps.Marker({
|
|
position: { lat: markerData.lat, lng: markerData.lng },
|
|
map: map,
|
|
title: markerData.title,
|
|
icon: {
|
|
url: markerData.icon, // Menggunakan ikon dari data
|
|
scaledSize: new google.maps.Size(30, 30) // Mengatur ukuran ikon
|
|
}
|
|
});
|
|
|
|
// Simpan marker ke array
|
|
markers.push(markerInstance);
|
|
|
|
// Event listener untuk klik marker
|
|
markerInstance.addListener('click', () => {
|
|
const infoWindow = new google.maps.InfoWindow();
|
|
infoWindow.setContent(markerData.content); // Set konten InfoWindow
|
|
infoWindow.open(map, markerInstance); // Tampilkan InfoWindow
|
|
});
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching markers:', error));
|
|
}
|
|
|
|
// Inisialisasi peta saat halaman selesai dimuat
|
|
window.onload = initMap;
|
|
</script>
|