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;
            border-radius: 10px;
            background-color: #f5f5f5;
        }

        #contents::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #aaa;
        }

        #contents::-webkit-scrollbar-thumb:hover {
            background-color: #888;
        }
    </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-primary dropdown-toggle btn-sm" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" 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: 350px;">
                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
                    </div>
                    <div style="width: 250px;" class="input-group ms-2">
                        <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 style="width: 150px" 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 ps-3">
                <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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script>
        const contentUrl = "{{url('/types/locations/contents')}}";
        const locationField = "location";
        //const filterFields = ['categoria'];
    </script>
    <script>

        const locationElementTemplate = $("#contents").children().first();

        function addLocationElement(item){
            let newElement = locationElementTemplate.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');
            return newElement;
        }

        function createInfowindowElement(item){
            let contentString = $("#marker-window").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');
            return contentString[0].outerHTML;
        }

        function initMap() {
            $.get(contentUrl).done(function (contents) {

                let items = contents["contents"];

                if (items != undefined) {

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

                    let currentItems = locationItems;

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

                    loadItems();

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

                        if (currentItems.length > 0) {

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

                            let currentInfoWindow = null;

                            currentItems = currentItems.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 infowindowElement = createInfowindowElement(item);

                                let infowindow = new google.maps.InfoWindow({ content: infowindowElement });

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

                                    if (currentInfoWindow) currentInfoWindow.close();

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

                                    currentInfoWindow = infowindow;
                                });

                                let newElement = addLocationElement(item);

                                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 = currentItems.map(function (item) {
                                return item.marker;
                            });

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

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

                            let clusterStyles = [{
                                url: 'http://localhost/maps-theme/public/template/cluster.png',
                                height: 40,
                                width: 40,
                                textSize: 14,
                                backgroundPosition: '0 0',
                                iconAnchor: [26, 53],
                                textColor: '#ffffff'
                            }];
                            let 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 = currentItems;

                                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(currentItems.length);

                                showedItems.forEach(function (item) {

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

                                    let newElement = addLocationElement(item);

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

                                        let bounds = new google.maps.LatLngBounds();
                                        bounds.extend(item.marker.getPosition());
                                        map.fitBounds(bounds);
                                        setTimeout(function () {
                                            let 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 = currentItems;
                            }

                            google.maps.event.addListener(map, 'dragend', getVisibleMarkers);

                            google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);

                            let locationInput = $('#ort')[0];
                            let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl"]}});
                            autocomplete.addListener("place_changed", function () {

                                let place = autocomplete.getPlace();
                                let address = place.formatted_address;
                                let geocoder = new google.maps.Geocoder();

                                geocoder.geocode({ 'address': address }, function(results, status) {
                                    if (status === google.maps.GeocoderStatus.OK) {
                                        let location = results[0].geometry.location;

                                        map.setCenter(location);
                                        map.fitBounds(results[0].geometry.viewport);

                                    } else {
                                        console.warn('Geocode não obteve sucesso devido a: ' + status);
                                    }
                                });

                            });
                        }
                    }
                }
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>
@stop