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;
        }

        .address{
            cursor: pointer;
            transition: all .2s;
        }
        .address:hover{
            background: #eee;
        }
    </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 id="filters">
                        <div class="dropdown me-2 d-none">
                            <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 p-2" id="options">    
                                <li>
                                    <label>
                                        <input class="check-filter" type="checkbox" value="1"> $option
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </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/'.config('settings.type').'/contents')}}";
        const locationField = "{{config('settings.location_field')}}";
        //const filterFields = ['categoria'];
    </script>
    <script>
        function initMap() {
            function createInfowindowElement(item){
                let infowindowElement = $("#marker-window").clone();
                infowindowElement.html(infowindowElement.html().replace('$title', item.title));
                infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? ''));
                infowindowElement.html(infowindowElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
                infowindowElement.removeClass('d-none');
                return infowindowElement[0].outerHTML;
            }
            
            let map = new google.maps.Map(document.getElementById("map"), {
                streetViewControl: false,
                mapTypeControl: false,
                fullscreenControl: false,
            });

            let currentItems = [];

            $.get(contentUrl).done(function (contents) {
                let items = contents["contents"];
                if (items != undefined) {
                    locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
                    currentItems = locationItems;
                    loadCurrentItems();
                }
            });

            let markerCluster;

            function loadCurrentItems() {
                $("#count-items-displayed").text(currentItems.length);
                if(markerCluster != undefined) markerCluster.clearMarkers();
                if (currentItems.length > 0) {
                    let openInfoWindow = null;

                    currentItems = currentItems.filter(function(item){
                        console.log(item.location);
                        return item.location != undefined;
                    });

                    currentItems = currentItems.map(function (item) {
                        item.location.lat = parseFloat(item[locationField].lat);
                        item.location.lng = parseFloat(item[locationField].lng);
                        let marker = new google.maps.Marker({
                            position: { lat: item.location.lat, lng: item.location.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 (openInfoWindow) openInfoWindow.close();
                            infowindow.open({ anchor: marker, map });
                            openInfoWindow = infowindow;
                        });
                        item.marker = marker;
                        return item;
                    });
                    
                    let markers = currentItems.map(item => item.marker);
                    
                    markerCluster = new MarkerClusterer(map, markers);
                    markerCluster.setStyles([{
                        url: 'http://localhost/maps-theme/public/template/cluster.png',
                        height: 40,
                        width: 40,
                        textSize: 14,
                        backgroundPosition: '0 0',
                        iconAnchor: [26, 53],
                        textColor: '#ffffff'
                    }]);

                    setTimeout(() => {
                        clearFocus();
                        showVisibleMarkers();    
                    }, 100);
                }
            }

            const locationElementTemplate = $("#contents").children().first();
            locationElementTemplate.remove();
            
            function showVisibleMarkers() {
                
                let showedItems = currentItems.filter(function (item) {
                    return map.getBounds().contains(item.marker.getPosition());
                });

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

                $("#contents").empty();
                showedItems.forEach(function (item) {
                    let locationElement = locationElementTemplate.clone();
                    locationElement.html(locationElement.html().replace('$title', item.title));    
                    locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
                    locationElement.html(locationElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
                    locationElement.removeClass('d-none');
                    locationElement.on('click', function () {
                        map.setZoom(12);
                        map.setCenter(item.marker.getPosition());                        
                        showVisibleMarkers();
                        google.maps.event.trigger(item.marker, 'click');
                    });
                    $("#contents").append(locationElement);
                });

                showedItems = currentItems;
            }

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

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

            function setLocationFocus(address){
                new google.maps.Geocoder().geocode({ 'address': address }, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        map.fitBounds(results[0].geometry.viewport);
                    } else {
                        console.warn('Geocode não obteve sucesso devido a: ' + status);
                    }
                });
            }

            function clearFocus(){
                let markers = currentItems.map(item => item.marker);
                if(currentItems.length == 1) {
                    map.setZoom(12);
                    map.setCenter(markers[0].getPosition());
                }else{
                    let bounds = new google.maps.LatLngBounds();
                    markers.forEach(function(marker){
                        bounds.extend(marker.getPosition());
                    });
                    map.fitBounds(bounds);
                }
            }

            $('#ort').on("change", function(){
                if($(this).val() === "") clearFocus();
            });

            let locationInput = $('#ort')[0];
            let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl","br"]}});
            autocomplete.addListener("place_changed", function () {
                let place = autocomplete.getPlace();
                let address = place.formatted_address;
                if (!place.geometry) {
                    let inputText = locationInput.value;
                    let autocompleteService = new google.maps.places.AutocompleteService();
                    autocompleteService.getPlacePredictions({ input: inputText, componentRestrictions: { country: ["de", "se", "at", "nl", "br"] } }, function (predictions, status) {
                        if (status === google.maps.places.PlacesServiceStatus.OK && predictions && predictions.length > 0) {
                            let firstPrediction = predictions[0];
                            address = firstPrediction.description;
                            locationInput.value = address;
                            setLocationFocus(address);
                        }
                    });
                } else setLocationFocus(address);
            });

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