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">

                @foreach($contents as $content)

                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-5">
                                    <img src="{{$content->image}}" alt="">
                                </div>
                                <div class="col-7">
                                    <h3 class="h5">{{$content->title}}</h3>
                                    <a href="{{$content->path}}"> Ansehen </a>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-8 g-0">
                <div id="map"></div>

            </div>
        </div>
    </div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
  <script>
        function initMap() {
            let items = {!! json_encode($contents) !!};
            items = items.data;

            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 5,
                center: { lat: parseFloat(items[0].location.lat), lng: parseFloat(items[0].location.lng)  }
            });

            items.forEach(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;
                });
            });
        }
        window.initMap = initMap;
    </script>
@stop