Areya
/
maps-theme
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

integrated with google maps

master
Gustavo Luigi 2023-05-15 15:45:13 -03:00
parent b3c5bcd8a2
commit b90b9ff1f5
1 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
content/index.blade.php Normal file
View File

@ -0,0 +1,41 @@
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<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($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>
</body>
</html>