maps-theme/content/index.blade.php

74 lines
2.4 KiB
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