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%;
        }
    </style>
@stop
@section('content')

    <div class="container">
        <div class="row">
            <div class="col">
                <h1>{{config('settings.name')}}</h1>
                <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="">
                            </div>
                            <div class="col-7">
                                <h3 class="h5"></h3>
                                <a href="">Ansehen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8 g-0">
                <div id="map"></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() {
            $.ajax({
                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>
@stop