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

added location search

master
Gustavo Luigi 2023-05-23 02:02:35 -03:00
parent 758b149614
commit bb8f019f8c
2 changed files with 193 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/contents/default.blade.php
View File

@ -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";

48
content/index.blade.php
View File

@ -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,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({
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"];

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