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

374
content/index.blade.php
View File

@ -64,10 +64,10 @@
</li> </li>
</ul> </ul>
</div> --> </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>
<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"> <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
<span class="input-group-text" id="search-button"> <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"> <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> </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 src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script> <script>
const contentUrl = "{{url('/api/types/locations/contents')}}"; const contentUrl = "{{url('/types/locations/contents')}}";
const locationField = "location"; const locationField = "location";
</script> </script>
<script> <script>
function initMap() { function initMap() {
$.ajax({ $.get(contentUrl).done(function (contents) {
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, let receivedItems = contents["contents"];
url: contentUrl,
type: 'GET',
data: {},
success: function (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(); $("#search-button").on("click", function () {
templateContent = templateElement; $("#contents").html("");
templateElement.remove(); let value = $("#search-input").val();
items = receivedItems.filter(function (item) {
return item.title.toLowerCase().includes(value.toLowerCase());
});
loadItems();
});


$("#search-button").on("click", function () { items = receivedItems;
$("#contents").html("");
let value = $("#search-input").val(); loadItems();
items = receivedItems.filter(function (item) {
return item.title.toLowerCase().includes(value.toLowerCase()); function loadItems() {
}); $("#count-items-displayed").text(items.length);
loadItems(); $("#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() { items = items.map(function (item) {
console.log(items.length);
$("#count-items-displayed").text(items.length);
$("#count-items").text(items.length);


let map = new google.maps.Map(document.getElementById("map"), { let lat = parseFloat(item[locationField].lat);
zoom: 6, let lng = parseFloat(item[locationField].lng);
center: { lat: 50.9807, lng: 10.31522 },
streetViewControl: false, let marker = new google.maps.Marker({
mapTypeControl: false, position: { lat: lat, lng: lng },
fullscreenControl: false, 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 lat = parseFloat(item[locationField].lat);
let lng = parseFloat(item[locationField].lng); 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(); let newElement = templateContent.clone();
newElement.html(newElement.html().replace('$title', item.title)); 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-src="$image"', 'src="' + item.image + '"'));
newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"')); newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
newElement.removeClass('d-none'); newElement.removeClass('d-none');


newElement.on('click', function () { newElement.on('click', function () {

var bounds = new google.maps.LatLngBounds(); var bounds = new google.maps.LatLngBounds();
bounds.extend(marker.getPosition()); bounds.extend(item.marker.getPosition());
map.fitBounds(bounds); map.fitBounds(bounds);
setTimeout(function () { setTimeout(function () {
var zoomLevel = map.getZoom(); var zoomLevel = map.getZoom();
@ -220,126 +310,46 @@


map.setCenter({ lat: lat, lng: lng }); map.setCenter({ lat: lat, lng: lng });


google.maps.event.trigger(marker, 'click'); google.maps.event.trigger(item.marker, 'click');
getVisibleMarkers(); getVisibleMarkers();
}); });


$("#contents").append(newElement); $("#contents").append(newElement);

item.marker = marker;

return item;
}); });


let markers = items.map(function (item) { showedItems = items;
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);
} }

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>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>
@stop @stop