140 lines
5.8 KiB
JavaScript
140 lines
5.8 KiB
JavaScript
function initMap() {
|
|
$.ajax({
|
|
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
|
|
url: contentUrl,
|
|
type: 'GET',
|
|
data: {},
|
|
success: function (contents) {
|
|
|
|
let items = contents["contents"];
|
|
|
|
if (items != undefined) {
|
|
|
|
let map = undefined;
|
|
|
|
if (items.length > 1) {
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 6,
|
|
center: { lat: 50.9807, lng: 10.31522 }
|
|
});
|
|
} else {
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 7,
|
|
center: { lat: items[0][locationField].lat, lng: items[0][locationField].lng }
|
|
});
|
|
}
|
|
|
|
let templateElement = $("#contents").children().first();
|
|
templateContent = templateElement;
|
|
templateElement.remove();
|
|
|
|
if ($("#contents").length > 0) {
|
|
items.forEach(function (item) {
|
|
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');
|
|
$("#contents").append(newElement);
|
|
});
|
|
}
|
|
|
|
items = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
|
|
|
|
let currentInfoWindow = null;
|
|
|
|
const templateInfowindow = $("#marker-window");
|
|
|
|
const markers = items.map(function (item) {
|
|
let marker = new google.maps.Marker({
|
|
position: { lat: parseFloat(item[locationField].lat), lng: parseFloat(item[locationField].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');
|
|
|
|
marker.addListener('click', function () {
|
|
if (currentInfoWindow) currentInfoWindow.close();
|
|
|
|
let infowindow = new google.maps.InfoWindow({
|
|
content: contentString[0].outerHTML,
|
|
ariaLabel: "",
|
|
});
|
|
|
|
infowindow.open({
|
|
anchor: marker,
|
|
map,
|
|
});
|
|
|
|
currentInfoWindow = infowindow;
|
|
});
|
|
|
|
return marker;
|
|
});
|
|
|
|
new markerClusterer.MarkerClusterer({ map, markers });
|
|
|
|
if ($("#contents").length > 0) {
|
|
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("");
|
|
|
|
showedItems.forEach(function (item) {
|
|
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');
|
|
$("#contents").append(newElement);
|
|
});
|
|
|
|
showedItems = items;
|
|
}
|
|
|
|
google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
|
|
|
|
google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
|
|
}
|
|
}
|
|
},
|
|
error: function (error) {
|
|
console.log(error);
|
|
}
|
|
});
|
|
}
|
|
window.initMap = initMap; |