@extends('template.'.config('settings.template').'.content.master')
@section('content')

<a href="{{url('/')}}"> ← Back</a>

    <h1>{{$content->title}}</h1>


    <p>{{$content->desription}}</p>
    <img src="{{$content->image}}" alt="">


<div id="map"></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($content) !!};
            items = items.data;

            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 5,
                center: { lat: parseFloat(content.location.lat), lng: parseFloat(content.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,
                });

            });
        }
        window.initMap = initMap;
    </script>

@stop