integrated with google maps

2023-05-15 15:45:13 -03:00 · 2023-05-15 15:45:13 -03:00 · b90b9ff1f5
parent b3c5bcd8a2
commit b90b9ff1f5
1 changed files with 41 additions and 0 deletions
--- a/content/index.blade.php
+++ b/content/index.blade.php
@ -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>