partial update create google map from kmz file

resources/views/maps/google-api.blade.php

@@ -0,0 +1,46 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
+@section('css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+<div id="map" style="width: 100%; height: 500px;"></div>
+<img src="" />
+@endsection
+
+@section('scripts')
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/togeojson@0.16.0"></script>
+<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
+<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta
+
+        // Tambahkan peta dasar dari OpenStreetMap
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Muat file KMZ
+        omnivore.kml("{{ asset('storage/maps/RENCANAPOLARUANG_RTRW_2024_2044.kmz') }}")
+            .on('ready', function () {
+                try {
+                    var bounds = this.getBounds();
+                    if (bounds.isValid()) {
+                        map.fitBounds(bounds);
+                    } else {
+                        console.warn("Bounds tidak valid, gunakan fallback.");
+                        map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
+                    }
+                } catch (error) {
+                    console.error("Error setting bounds:", error);
+                    map.setView([-6.1751, 106.8650], 10);
+                }
+            })
+            .addTo(map);
+
+    });
+</script>
+@endsection