added marker window

content/contents/default.blade.php

@@ -9,46 +9,33 @@
     </style>
 @stop
 @section('content')
-
     <div class="container">
         <div class="row">
             <div class="col">
                 <a href="{{url('/')}}"> ← Back</a>
                 <h1>{{$content->title}}</h1>
-                <p>{{$content->description}}</p>
+                <p>{$content->description}</p>
                 <img src="{{$content->image}}" alt="">
             </div>
-
-
         </div>
-
         <div class="row">
-
             <div class="col-8 g-0">
                 <div id="map"></div>
-
+                <div id="marker-window" class="d-none">
+                    <h5 id="firstHeading" class="firstHeading">$title</h5>
+                    <div id="bodyContent">
+                        <p>$description</p>
+                        <a data-href="$path">Details</a>
+                    </div>
+                </div>
             </div>
         </div>
-
     </div>
-
     <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() {
+        const contentUrl = "{{url('/api/contents/'.$content->id)}}";
-            let item = {!! json_encode($content) !!};
+        const locationField = "location";
-            
-            const map = new google.maps.Map(document.getElementById("map"), {
-                zoom: 5,
-                center: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng)  }
-            });
-
-            let marker = new google.maps.Marker({
-                position: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
-                map: map,
-                title: item.title,
-                optimized: false,
-            });
-        }
-        window.initMap = initMap;
     </script>
+    <script src="{{asset('template/js/maps.js')}}"></script>
 @stop

content/index.blade.php

@@ -9,7 +9,6 @@
     </style>
 @stop
 @section('content')
-
     <div class="container">
         <div class="row">
             <div class="col">
@@ -17,18 +16,17 @@
                 <p>{{config('settings.description')}}</p>
             </div>
         </div>
-
         <div class="row">
             <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="">
+                                <img data-src="$image" alt="">
                             </div>
                             <div class="col-7">
-                                <h3 class="h5"></h3>
+                                <h3 class="h5">$title</h3>
-                                <a href="">Ansehen</a>
+                                <a data-href="$path">Ansehen</a>
                             </div>
                         </div>
                     </div>
@@ -36,120 +34,21 @@
             </div>
             <div class="col-8 g-0">
                 <div id="map"></div>
+                <div id="marker-window" class="d-none">
+                    <h5 id="firstHeading" class="firstHeading">$title</h5>
+                    <div id="bodyContent">
+                        <p>$description</p>
+                        <a data-href="$path">Details</a>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-
-    <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() {
+        const contentUrl = "{{url('/api/types/locations/contents')}}";
-            $.ajax({
+        const locationField = "location";
-                headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
-                url: "{{url('/api/types/locations/contents')}}",
-                type: 'GET',
-                data: {},
-                success: function (contents) {
-
-                    let items = contents["contents"];
-
-                    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;
     </script>
+    <script src="{{asset('template/js/maps.js')}}"></script>
 @stop

content/master.blade.php

@@ -1,21 +1,16 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
         <meta charset="utf-8">
+        <meta name="csrf-token" content="{{csrf_token()}}">
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <meta name="description" content="{{config('settings.description')}}" />
         <meta name="author" content=""/>
-        @yield('head')
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
-
+        <script src="{{storage('libs/jquery-3.6.0.min.js')}}"></script>
-
+        @yield('head')
-
     </head>
-
     <body>
         @yield('content')
-
-
     </body>
-
 </html>

js/maps.js

@@ -0,0 +1,140 @@
+function initMap() {
+    $.ajax({
+        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
+        url: contentUrl,
+        type: 'GET',
+        data: {},
+        success: function (contents) {
+
+            let items = contents["contents"];
+
+            if (items != undefined) {
+
+                let map = undefined;
+
+                if (items.length > 1) {
+                    map = new google.maps.Map(document.getElementById("map"), {
+                        zoom: 6,
+                        center: { lat: 50.9807, lng: 10.31522 }
+                    });
+                } else {
+                    map = new google.maps.Map(document.getElementById("map"), {
+                        zoom: 7,
+                        center: { lat: items[0][locationField].lat, lng: items[0][locationField].lng }
+                    });
+                }
+
+                let templateElement = $("#contents").children().first();
+                templateContent = templateElement;
+                templateElement.remove();
+
+                if ($("#contents").length > 0) {
+                    items.forEach(function (item) {
+                        let newElement = templateContent.clone();
+                        newElement.html(newElement.html().replace('$title', item.title));
+                        newElement.html(newElement.html().replace('$image', item.image));
+                        newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
+                        newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                        newElement.removeClass('d-none');
+                        $("#contents").append(newElement);
+                    });
+                }
+
+                items = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
+
+                let currentInfoWindow = null;
+
+                const templateInfowindow = $("#marker-window");
+
+                const markers = items.map(function (item) {
+                    let marker = new google.maps.Marker({
+                        position: { lat: parseFloat(item[locationField].lat), lng: parseFloat(item[locationField].lng) },
+                        map: map,
+                        title: item.title,
+                        optimized: false,
+                    });
+
+                    let contentString = templateInfowindow.clone();
+
+                    contentString.html(contentString.html().replace('$title', item.title));
+                    contentString.html(contentString.html().replace('$description', item.description ?? ''));
+                    contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                    contentString.removeClass('d-none');
+
+                    marker.addListener('click', function () {
+                        if (currentInfoWindow) currentInfoWindow.close();
+
+                        let infowindow = new google.maps.InfoWindow({
+                            content: contentString[0].outerHTML,
+                            ariaLabel: "",
+                        });
+
+                        infowindow.open({
+                            anchor: marker,
+                            map,
+                        });
+
+                        currentInfoWindow = infowindow;
+                    });
+
+                    return marker;
+                });
+
+                new markerClusterer.MarkerClusterer({ map, markers });
+
+                if ($("#contents").length > 0) {
+                    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[locationField].lat), parseFloat(item[locationField].lng)];
+
+                            return visibleMarkersPosition.some(function (item) {
+                                return item[0] === position[0] && item[1] === position[1];
+                            });
+
+                        });
+
+                        $("#contents").html("");
+
+                        showedItems.forEach(function (item) {
+                            let newElement = templateContent.clone();
+                            newElement.html(newElement.html().replace('$title', item.title));
+                            newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
+                            newElement.html(newElement.html().replace('data-href="$path"', '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;