From bb8f019f8c371c9efb8681a8bbcae05828859762 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Tue, 23 May 2023 02:02:35 -0300
Subject: [PATCH] added location search

---
 content/contents/default.blade.php |   3 +-
 content/index.blade.php            | 374 +++++++++++++++--------------
 2 files changed, 193 insertions(+), 184 deletions(-)

diff --git a/content/contents/default.blade.php b/content/contents/default.blade.php
index f7908c8..7096247 100644
--- a/content/contents/default.blade.php
+++ b/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";
diff --git a/content/index.blade.php b/content/index.blade.php
index 5a4a48f..6a472b7 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -64,10 +64,10 @@
                             </li>
                         </ul>
                     </div> -->
-                    <div style="width: 200px;">
-                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort" disabled>
+                    <div style="width: 350px;">
+                        <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,109 +109,199 @@
             </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({
-                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
-                url: contentUrl,
-                type: 'GET',
-                data: {},
-                success: function (contents) {
+            $.get(contentUrl).done(function (contents) {
+                let receivedItems = contents["contents"];
 
-                    let receivedItems = contents["contents"];
+                if (receivedItems != undefined) {
 
-                    if (receivedItems != undefined) {
+                    receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
 
-                        receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
+                    const templateInfowindow = $("#marker-window");
 
-                        const templateInfowindow = $("#marker-window");
+                    let templateElement = $("#contents").children().first();
+                    templateContent = templateElement;
+                    templateElement.remove();
 
-                        let templateElement = $("#contents").children().first();
-                        templateContent = templateElement;
-                        templateElement.remove();
+                    $("#search-button").on("click", function () {
+                        $("#contents").html("");
+                        let value = $("#search-input").val();
+                        items = receivedItems.filter(function (item) {
+                            return item.title.toLowerCase().includes(value.toLowerCase());
+                        });
+                        loadItems();
+                    });
 
-                        $("#search-button").on("click", function () {
-                            $("#contents").html("");
-                            let value = $("#search-input").val();
-                            items = receivedItems.filter(function (item) {
-                                return item.title.toLowerCase().includes(value.toLowerCase());
-                            });
-                            loadItems();
+                    items = receivedItems;
+
+                    loadItems();
+
+                    function loadItems() {
+                        $("#count-items-displayed").text(items.length);
+                        $("#count-items").text(items.length);
+
+                        let map = new google.maps.Map(document.getElementById("map"), {
+                            zoom: 6,
+                            center: { lat: 50.9807, lng: 10.31522 },
+                            streetViewControl: false,
+                            mapTypeControl: false,
+                            fullscreenControl: false,
                         });
 
-                        items = receivedItems;
+                        if (items.length > 0) {
 
-                        loadItems();
+                            let currentInfoWindow = null;
 
-                        function loadItems() {
-                            console.log(items.length);
-                            $("#count-items-displayed").text(items.length);
-                            $("#count-items").text(items.length);
+                            items = items.map(function (item) {
 
-                            let map = new google.maps.Map(document.getElementById("map"), {
-                                zoom: 6,
-                                center: { lat: 50.9807, lng: 10.31522 },
-                                streetViewControl: false,
-                                mapTypeControl: false,
-                                fullscreenControl: false,
+                                let lat = parseFloat(item[locationField].lat);
+                                let lng = parseFloat(item[locationField].lng);
+
+                                let marker = new google.maps.Marker({
+                                    position: { lat: lat, lng: lng },
+                                    map: map,
+                                    title: item.title,
+                                    optimized: false,
+                                });
+
+                                let contentString = templateInfowindow.clone();
+
+                                contentString.html(contentString.html().replace('$title', item.title));
+                                contentString.html(contentString.html().replace('$description', item.description ?? ''));
+                                contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                                contentString.removeClass('d-none');
+
+                                let infowindow = new google.maps.InfoWindow({
+                                    content: contentString[0].outerHTML
+                                });
+
+                                marker.addListener('click', function () {
+
+                                    if (currentInfoWindow) currentInfoWindow.close();
+
+                                    infowindow.open({
+                                        anchor: marker,
+                                        map
+                                    });
+
+                                    currentInfoWindow = infowindow;
+                                });
+
+                                let newElement = templateContent.clone();
+                                newElement.html(newElement.html().replace('$title', item.title));
+                                newElement.html(newElement.html().replace('$image', item.image));
+                                newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
+                                newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                                newElement.removeClass('d-none');
+
+                                newElement.on('click', function () {
+                                    
+                                    var bounds = new google.maps.LatLngBounds();
+                                    bounds.extend(marker.getPosition());
+                                    map.fitBounds(bounds);
+                                    setTimeout(function () {
+                                        var zoomLevel = map.getZoom();
+                                        if (zoomLevel > 12) map.setZoom(12);
+                                    }, 500);
+
+                                    map.setCenter({ lat: lat, lng: lng });
+
+                                    google.maps.event.trigger(marker, 'click');
+                                    getVisibleMarkers();
+                                });
+
+                                $("#contents").append(newElement);
+
+                                item.marker = marker;
+
+                                return item;
                             });
-                            if (items.length > 0) {
+
+                            let markers = items.map(function (item) {
+                                return item.marker;
+                            });
+
+                            var bounds = new google.maps.LatLngBounds();
+                            for (var i = 0; i < markers.length; i++) {
+                                bounds.extend(markers[i].getPosition());
+                            }
+                            map.fitBounds(bounds);
 
 
-                                let currentInfoWindow = null;
+                            setTimeout(function () {
+                                var zoomLevel = map.getZoom();
+                                if (zoomLevel > 12) map.setZoom(12);
+                            }, 500);
 
-                                items = items.map(function (item) {
+                            var clusterStyles = [
+                                {
+                                    url: 'http://localhost/maps-theme/public/template/cluster.png',
+                                    height: 40,
+                                    width: 40,
+                                    textSize: 14,
+                                    backgroundPosition: '0 0',
+                                    iconAnchor: [26, 53],
+                                    textColor: '#ffffff'
+                                }
+                            ];
+                            var markerCluster = new MarkerClusterer(map, markers);
+                            markerCluster.setStyles(clusterStyles);
+
+                            function getVisibleMarkers() {
+                                let zoomLevel = map.getZoom();
+                                let bounds = map.getBounds();
+
+                                let visibleMarkers = [];
+
+                                for (let i = 0; i < markers.length; i++) {
+                                    if (bounds.contains(markers[i].getPosition())) visibleMarkers.push(markers[i]);
+                                }
+
+                                let visibleMarkersPosition = visibleMarkers.map(function (visibleMarker) {
+                                    let position = visibleMarker.getPosition();
+                                    let latitude = position.lat();
+                                    let longitude = position.lng();
+                                    return [latitude, longitude];
+                                });
+
+                                let showedItems = items;
+
+                                showedItems = showedItems.filter(function (item) {
+
+                                    let position = [parseFloat(item[locationField].lat), parseFloat(item[locationField].lng)];
+
+                                    return visibleMarkersPosition.some(function (item) {
+                                        return item[0] === position[0] && item[1] === position[1];
+                                    });
+
+                                });
+
+                                $("#contents").html("");
+
+                                $("#count-items-displayed").text(showedItems.length);
+                                $("#count-items").text(items.length);
+
+                                showedItems.forEach(function (item) {
 
                                     let lat = parseFloat(item[locationField].lat);
                                     let lng = parseFloat(item[locationField].lng);
 
-                                    let marker = new google.maps.Marker({
-                                        position: { lat: lat, lng: lng },
-                                        map: map,
-                                        title: item.title,
-                                        optimized: false,
-                                    });
-
-                                    let contentString = templateInfowindow.clone();
-
-                                    contentString.html(contentString.html().replace('$title', item.title));
-                                    contentString.html(contentString.html().replace('$description', item.description ?? ''));
-                                    contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
-                                    contentString.removeClass('d-none');
-
-                                    let infowindow = new google.maps.InfoWindow({
-                                        content: contentString[0].outerHTML
-                                    });
-
-                                    marker.addListener('click', function () {
-
-                                        if (currentInfoWindow) currentInfoWindow.close();
-
-                                        infowindow.open({
-                                            anchor: marker,
-                                            map
-                                        });
-
-                                        currentInfoWindow = infowindow;
-                                    });
-
                                     let newElement = templateContent.clone();
                                     newElement.html(newElement.html().replace('$title', item.title));
-                                    newElement.html(newElement.html().replace('$image', item.image));
                                     newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
                                     newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
                                     newElement.removeClass('d-none');
 
                                     newElement.on('click', function () {
-                                        
+
                                         var bounds = new google.maps.LatLngBounds();
-                                        bounds.extend(marker.getPosition());
+                                        bounds.extend(item.marker.getPosition());
                                         map.fitBounds(bounds);
                                         setTimeout(function () {
                                             var zoomLevel = map.getZoom();
@@ -220,126 +310,46 @@
 
                                         map.setCenter({ lat: lat, lng: lng });
 
-                                        google.maps.event.trigger(marker, 'click');
+                                        google.maps.event.trigger(item.marker, 'click');
                                         getVisibleMarkers();
                                     });
 
                                     $("#contents").append(newElement);
-
-                                    item.marker = marker;
-
-                                    return item;
                                 });
 
-                                let markers = items.map(function (item) {
-                                    return item.marker;
-                                });
-
-                                var bounds = new google.maps.LatLngBounds();
-                                for (var i = 0; i < markers.length; i++) {
-                                    bounds.extend(markers[i].getPosition());
-                                }
-                                map.fitBounds(bounds);
-
-
-                                setTimeout(function () {
-                                    var zoomLevel = map.getZoom();
-                                    if (zoomLevel > 12) map.setZoom(12);
-                                }, 500);
-
-                                var clusterStyles = [
-                                    {
-                                        url: 'http://localhost/maps-theme/public/template/cluster.png',
-                                        height: 40,
-                                        width: 40,
-                                        textSize: 14,
-                                        backgroundPosition: '0 0',
-                                        iconAnchor: [26, 53],
-                                        textColor: '#ffffff'
-                                    }
-                                ];
-                                var markerCluster = new MarkerClusterer(map, markers);
-                                markerCluster.setStyles(clusterStyles);
-
-                                function getVisibleMarkers() {
-                                    let zoomLevel = map.getZoom();
-                                    let bounds = map.getBounds();
-
-                                    let visibleMarkers = [];
-
-                                    for (let i = 0; i < markers.length; i++) {
-                                        if (bounds.contains(markers[i].getPosition())) visibleMarkers.push(markers[i]);
-                                    }
-
-                                    let visibleMarkersPosition = visibleMarkers.map(function (visibleMarker) {
-                                        let position = visibleMarker.getPosition();
-                                        let latitude = position.lat();
-                                        let longitude = position.lng();
-                                        return [latitude, longitude];
-                                    });
-
-                                    let showedItems = items;
-
-                                    showedItems = showedItems.filter(function (item) {
-
-                                        let position = [parseFloat(item[locationField].lat), parseFloat(item[locationField].lng)];
-
-                                        return visibleMarkersPosition.some(function (item) {
-                                            return item[0] === position[0] && item[1] === position[1];
-                                        });
-
-                                    });
-
-                                    $("#contents").html("");
-
-                                    $("#count-items-displayed").text(showedItems.length);
-                                    $("#count-items").text(items.length);
-
-                                    showedItems.forEach(function (item) {
-
-                                        let lat = parseFloat(item[locationField].lat);
-                                        let lng = parseFloat(item[locationField].lng);
-
-                                        let newElement = templateContent.clone();
-                                        newElement.html(newElement.html().replace('$title', item.title));
-                                        newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
-                                        newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
-                                        newElement.removeClass('d-none');
-
-                                        newElement.on('click', function () {
-
-                                            var bounds = new google.maps.LatLngBounds();
-                                            bounds.extend(item.marker.getPosition());
-                                            map.fitBounds(bounds);
-                                            setTimeout(function () {
-                                                var zoomLevel = map.getZoom();
-                                                if (zoomLevel > 12) map.setZoom(12);
-                                            }, 500);
-
-                                            map.setCenter({ lat: lat, lng: lng });
-
-                                            google.maps.event.trigger(item.marker, 'click');
-                                            getVisibleMarkers();
-                                        });
-
-                                        $("#contents").append(newElement);
-                                    });
-
-                                    showedItems = items;
-                                }
-
-                                google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
-
-                                google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
+                                showedItems = items;
                             }
+
+                            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
\ No newline at end of file