maps-theme/content/index.blade.php

@extends('template.'.config('settings.template').'.content.master')
@section('head')
    <title>Home | {{config('settings.name')}}</title>
    <style>
        #map {
            height: 80vh;
            width: 100%;
        }
        .address + .address{
            margin-top: .5rem;
        }
        #marker-window{
            min-width: 100px;
        }
        #contents {
            scrollbar-color: #aaa #f5f5f5;
        }

        #contents::-webkit-scrollbar {
            width: 8px;
            background-color: #f5f5f5;
        }

        #contents::-webkit-scrollbar-thumb {
            background-color: #aaa;
        }

        #contents::-webkit-scrollbar-thumb:hover {
            background-color: #666;
        }

        #contents::-moz-scrollbar {
            background-color: #f5f5f5;
        }

        #contents::-moz-scrollbar-thumb {
            background-color: #aaa;
        }

        #contents::-moz-scrollbar-thumb:hover {
            background-color: #666;
        }
    </style>
@stop
@section('content')
    <div class="container py-5">
        <div class="row mb-3">
            <div id="filters" class="col-12 col-md rounded-end">
                <div class="d-flex">
                    <!-- <div class="dropdown me-2">
                        <button class="btn btn-secondary dropdown-toggle btn-sm" style="background: #f49c35; border:none;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            Filter <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu checkbox-menu allow-focus">    
                            <li>
                                <label>
                                    <input class="check-filter" type="checkbox" value="1"> Option 1
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input class="check-filter" type="checkbox" value="2"> Option 2
                                </label>
                            </li>
                        </ul>
                    </div> -->
                    <div style="width: 200px;">
                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort" disabled>
                    </div>
                    <div class="input-group ms-2" style="width: 200px;">
                        <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
                        <span class="input-group-text" id="search-button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                            </svg>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-auto pe-0 d-flex align-items-end">
                <p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span> results</p>
            </div>
        </div>
        <div class="row">
            <div class="col-4 overflow-auto" style="height: 80vh;" id="contents">
                <div class="card d-none address">
                    <div class="card-body">
                        <div class="row">
                            <!-- <div class="col-5">
                                <img data-src="$image" alt="">
                            </div> -->
                            <div class="col-12">
                                <h3 class="fs-6 m-0">$title</h3>
                                <!-- <a data-href="$path">Ansehen</a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8 g-0">
                <div id="map"></div>
                <div id="marker-window" class="d-none">
                    <h6 id="firstHeading" class="firstHeading">$title</h6>
                    <div id="bodyContent">
                        <p>$description</p>
                        <a data-href="$path" style="outline: none;">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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script>
        const contentUrl = "{{url('/api/types/locations/contents')}}";
        const locationField = "location";
    </script>
    <script>
        function initMap() {
            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url: contentUrl,
                type: 'GET',
                data: {},
                success: function (contents) {

                    let receivedItems = contents["contents"];

                    if (receivedItems != undefined) {

                        receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });

                        const templateInfowindow = $("#marker-window");

                        let templateElement = $("#contents").children().first();
                        templateContent = templateElement;
                        templateElement.remove();

                        $("#search-button").on("click", function () {
                            $("#contents").html("");
                            let value = $("#search-input").val();
                            items = receivedItems.filter(function (item) {
                                return item.title.toLowerCase().includes(value.toLowerCase());
                            });
                            loadItems();
                        });

                        items = receivedItems;

                        loadItems();

                        function loadItems() {
                            console.log(items.length);
                            $("#count-items-displayed").text(items.length);
                            $("#count-items").text(items.length);

                            let map = new google.maps.Map(document.getElementById("map"), {
                                zoom: 6,
                                center: { lat: 50.9807, lng: 10.31522 },
                                streetViewControl: false,
                                mapTypeControl: false,
                                fullscreenControl: false,
                            });
                            if (items.length > 0) {


                                let currentInfoWindow = null;

                                items = items.map(function (item) {

                                    let lat = parseFloat(item[locationField].lat);
                                    let lng = parseFloat(item[locationField].lng);

                                    let marker = new google.maps.Marker({
                                        position: { lat: lat, lng: 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');

                                    let infowindow = new google.maps.InfoWindow({
                                        content: contentString[0].outerHTML
                                    });

                                    marker.addListener('click', function () {

                                        if (currentInfoWindow) currentInfoWindow.close();

                                        infowindow.open({
                                            anchor: marker,
                                            map
                                        });

                                        currentInfoWindow = infowindow;
                                    });

                                    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');

                                    newElement.on('click', function () {
                                        
                                        var bounds = new google.maps.LatLngBounds();
                                        bounds.extend(marker.getPosition());
                                        map.fitBounds(bounds);
                                        setTimeout(function () {
                                            var zoomLevel = map.getZoom();
                                            if (zoomLevel > 12) map.setZoom(12);
                                        }, 500);

                                        map.setCenter({ lat: lat, lng: lng });

                                        google.maps.event.trigger(marker, 'click');
                                        getVisibleMarkers();
                                    });

                                    $("#contents").append(newElement);

                                    item.marker = marker;

                                    return item;
                                });

                                let markers = items.map(function (item) {
                                    return item.marker;
                                });

                                var bounds = new google.maps.LatLngBounds();
                                for (var i = 0; i < markers.length; i++) {
                                    bounds.extend(markers[i].getPosition());
                                }
                                map.fitBounds(bounds);


                                setTimeout(function () {
                                    var zoomLevel = map.getZoom();
                                    if (zoomLevel > 12) map.setZoom(12);
                                }, 500);

                                var clusterStyles = [
                                    {
                                        url: 'http://localhost/maps-theme/public/template/cluster.png',
                                        height: 40,
                                        width: 40,
                                        textSize: 14,
                                        backgroundPosition: '0 0',
                                        iconAnchor: [26, 53],
                                        textColor: '#ffffff'
                                    }
                                ];
                                var markerCluster = new MarkerClusterer(map, markers);
                                markerCluster.setStyles(clusterStyles);

                                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("");

                                    $("#count-items-displayed").text(showedItems.length);
                                    $("#count-items").text(items.length);

                                    showedItems.forEach(function (item) {

                                        let lat = parseFloat(item[locationField].lat);
                                        let lng = parseFloat(item[locationField].lng);

                                        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');

                                        newElement.on('click', function () {

                                            var bounds = new google.maps.LatLngBounds();
                                            bounds.extend(item.marker.getPosition());
                                            map.fitBounds(bounds);
                                            setTimeout(function () {
                                                var zoomLevel = map.getZoom();
                                                if (zoomLevel > 12) map.setZoom(12);
                                            }, 500);

                                            map.setCenter({ lat: lat, lng: lng });

                                            google.maps.event.trigger(item.marker, 'click');
                                            getVisibleMarkers();
                                        });

                                        $("#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>
@stop