added location search

content/contents/default.blade.php

@@ -14,7 +14,7 @@
             <div class="col">
                 <a href="{{url('/')}}"> ← Back</a>
                 <h1>{{$content->title}}</h1>
-                <p>{$content->description}</p>
+                <!-- <p>{{-- $content->description --}}</p> -->
                 <img src="{{$content->image}}" alt="">
             </div>
         </div>
@@ -32,7 +32,6 @@
         </div>
     </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
-    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
     <script>
         const contentUrl = "{{url('/api/contents/'.$content->id)}}";
         const locationField = "location";

content/index.blade.php

@@ -64,10 +64,10 @@
                             </li>
                         </ul>
                     </div> -->
-                    <div style="width: 200px;">
+                    <div style="width: 350px;">
-                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort" disabled>
+                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
                     </div>
-                    <div class="input-group ms-2" style="width: 200px;">
+                    <div style="width: 250px;" class="input-group ms-2">
                         <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
                         <span class="input-group-text" id="search-button">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
@@ -109,21 +109,14 @@
             </div>
         </div>
     </div>
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
     <script>
-        const contentUrl = "{{url('/api/types/locations/contents')}}";
+        const contentUrl = "{{url('/types/locations/contents')}}";
         const locationField = "location";
     </script>
     <script>
         function initMap() {
-            $.ajax({
+            $.get(contentUrl).done(function (contents) {
-                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
-                url: contentUrl,
-                type: 'GET',
-                data: {},
-                success: function (contents) {
-
                 let receivedItems = contents["contents"];
 
                 if (receivedItems != undefined) {
@@ -150,7 +143,6 @@
                     loadItems();
 
                     function loadItems() {
-                            console.log(items.length);
                         $("#count-items-displayed").text(items.length);
                         $("#count-items").text(items.length);
 
@@ -161,8 +153,8 @@
                             mapTypeControl: false,
                             fullscreenControl: false,
                         });
-                            if (items.length > 0) {
 
+                        if (items.length > 0) {
 
                             let currentInfoWindow = null;
 
@@ -331,15 +323,33 @@
                             google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
 
                             google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
+
+                            let locationInput = $('#ort')[0];
+                            let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl"]}});
+                            autocomplete.addListener("place_changed", function () {
+
+                                let place = autocomplete.getPlace();
+                                let address = place.formatted_address;
+                                let geocoder = new google.maps.Geocoder();
+
+                                geocoder.geocode({ 'address': address }, function(results, status) {
+                                    if (status === google.maps.GeocoderStatus.OK) {
+                                        let location = results[0].geometry.location;
+
+                                        map.setCenter(location);
+                                        map.fitBounds(results[0].geometry.viewport);
+
+                                    } else {
+                                        console.warn('Geocode não obteve sucesso devido a: ' + status);
+                                    }
+                                });
+
+                            });
                         }
                     }
                 }
-                },
-                error: function (error) {
-                    console.log(error);
-                }
             });
         }
-        window.initMap = initMap;
     </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>
 @stop