added drag and zoom map events

.gitignore

@@ -1 +1,2 @@
+.vscode
 .idea

content/index.blade.php

@@ -19,54 +19,135 @@
         </div>
 
         <div class="row">
-            <div class="col-4">
-
-                @foreach($contents as $content)
-
-                    <div class="card">
-                        <div class="card-body">
-                            <div class="row">
-                                <div class="col-5">
-                                    <img src="{{$content->image}}" alt="">
-                                </div>
-                                <div class="col-7">
-                                    <h3 class="h5">{{$content->title}}</h3>
-                                    <a href="{{$content->path}}"> Ansehen </a>
-                                </div>
+            <div class="col-4" id="contents">
+                <div class="card d-none">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-5">
+                                <img src="" alt="">
+                            </div>
+                            <div class="col-7">
+                                <h3 class="h5"></h3>
+                                <a href="">Ansehen</a>
                             </div>
-
                         </div>
                     </div>
-                @endforeach
+                </div>
             </div>
             <div class="col-8 g-0">
                 <div id="map"></div>
-
             </div>
         </div>
     </div>
 
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
-  <script>
+    <script src="{{storage('libs/jquery-3.6.0.min.js')}}"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
+    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
+    <script>
         function initMap() {
-            let items = {!! json_encode($contents) !!};
-            items = items.data;
+            $.ajax({
+                headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
+                url: "{{url('/api/types/locations/contents')}}",
+                type: 'GET',
+                data: {},
+                success: function (contents) {
 
-            const map = new google.maps.Map(document.getElementById("map"), {
-                zoom: 5,
-                center: { lat: parseFloat(items[0].location.lat), lng: parseFloat(items[0].location.lng)  }
-            });
+                    let items = contents["contents"];
 
-            items.forEach(function(item){
-                let marker = new google.maps.Marker({
-                    position: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
-                    map: map,
-                    title: item.title,
-                    optimized: false,
-                });
-                marker.addListener('click', function() {
-                    window.location.href = item.path;
-                });
+                    items.forEach(function(item) {
+                        let templateElement = $("#contents").children().first()
+                        
+                        let newElement = templateElement.clone();
+
+                        newElement.find('h3').text(item.title);
+                        newElement.find('img').attr('attr', item.image);
+                        newElement.find('a').attr('href', item.path);
+                        newElement.removeClass('d-none');
+                        
+                        $("#contents").append(newElement);
+                    });
+
+                    const map = new google.maps.Map(document.getElementById("map"), {
+                        zoom: 6,
+                        center: { lat: 50.9807, lng: 10.31522 }
+                    });
+
+                    items = items.filter(function(item) { return item.location.lat !== '' && item.location.lng !== ''});
+
+                    const markers = items.map(function(item){
+                        let marker = new google.maps.Marker({
+                            position: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
+                            map: map,
+                            title: item.title,
+                            optimized: false,
+                        });
+
+                        marker.addListener('click', function() {
+                            window.location.href = item.path;
+                        });
+
+                        return marker;
+                    });
+
+                    const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
+
+                    function getVisibleMarkers() {
+                        let zoomLevel = map.getZoom();
+                        let bounds = map.getBounds();
+
+                        let visibleMarkers = [];
+
+                        for (let i = 0; i < markers.length; i++) {
+                            if (bounds.contains(markers[i].getPosition())) visibleMarkers.push(markers[i]);
+                        }
+
+                        let visibleMarkersPosition = visibleMarkers.map(function(visibleMarker){
+                            let position = visibleMarker.getPosition();
+                            let latitude = position.lat();
+                            let longitude = position.lng();
+                            return [latitude, longitude];
+                        });
+
+                        let showedItems = items;
+
+                        showedItems = showedItems.filter(function(item){
+
+                            let position = [parseFloat(item.location.lat), parseFloat(item.location.lng)];
+
+                            return visibleMarkersPosition.some(function(item) {
+                                return item[0] === position[0] && item[1] === position[1];
+                            });
+
+                        });
+                        
+                        let templateElement = $("#contents").children().first();
+                        $("#contents").html(templateElement[0].outerHTML);
+
+                        showedItems.forEach(function(item) {
+
+                            let templateElement = $("#contents").children().first();
+
+                            let newElement = templateElement.clone();
+
+                            newElement.find('h3').text(item.title);
+                            newElement.find('img').attr('attr', item.image);
+                            newElement.find('a').attr('href', item.path);
+                            newElement.removeClass('d-none');
+                            
+                            $("#contents").append(newElement);
+                            
+                        });
+
+                        showedItems = items;
+                    }
+
+                    google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
+
+                    google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
+                },
+                error: function(error){
+                    console.log(error);
+                }
             });
         }
         window.initMap = initMap;