190 lines
3.9 KiB
JavaScript
190 lines
3.9 KiB
JavaScript
|
|
const zuerich_bounds = {
|
|
north: 47.43590970260092,
|
|
south: 47.278703309031846,
|
|
west: 8.40742642179812,
|
|
east: 8.680047733589026,
|
|
};
|
|
|
|
function initMap() {
|
|
const map = new google.maps.Map(document.getElementById('map'), {
|
|
mapId: "fd4581e1612d9ef",
|
|
center: {lat: 47.36972459746934, lng: 8.53404830446534},
|
|
restriction: {
|
|
latLngBounds: zuerich_bounds,
|
|
strictBounds: false,
|
|
},
|
|
zoom: 13,
|
|
disableDefaultUI: true,
|
|
gestureHandling: "greedy"
|
|
|
|
});
|
|
infoWindow = new google.maps.InfoWindow();
|
|
|
|
addMarkers();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addMarkers(){
|
|
|
|
let url = "system/alleInfosHolen.php";
|
|
fetch(url)
|
|
.then((response) => {
|
|
return response.json();
|
|
})
|
|
.then((markerData) => {
|
|
let mostLikes = 1;
|
|
|
|
for (let i = 0; i < markerData.length; i++) {
|
|
if(markerData[i].likes >= mostLikes){
|
|
mostLikes = markerData[i].likes;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(mostLikes);
|
|
|
|
|
|
let markerSizeFactor = 1/mostLikes*100;
|
|
|
|
|
|
for (let i = 0; i < markerData.length; i++) {
|
|
|
|
let markerIMGcounter = markerData[i].id % 6;
|
|
|
|
|
|
|
|
let likes = markerData[i].likes
|
|
|
|
|
|
|
|
|
|
|
|
let markersizeDelta = likes * markerSizeFactor /100 * 80
|
|
let markersize = markersizeDelta + 40
|
|
console.log(markersize);
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
if (markerData[i].sichtbarkeit = 1) {
|
|
|
|
const marker = new google.maps.Marker({
|
|
position: {lat: markerData[i].koordinatenLat, lng: markerData[i].koordinatenLng},
|
|
map: map,
|
|
title: markerData[i].titel,
|
|
icon: {
|
|
url: "/images/Marker_" + markerIMGcounter + ".svg",
|
|
scaledSize: new google.maps.Size(markersize, markersize),
|
|
|
|
},
|
|
animation: google.maps.Animation.DROP,
|
|
zIndex: 100,
|
|
|
|
});
|
|
|
|
|
|
marker.addListener("click", () => {
|
|
ideeAnzeigen(markerData[i]);
|
|
|
|
openOverlay();
|
|
|
|
})
|
|
}
|
|
else {
|
|
|
|
}
|
|
}, Math.floor(Math.random() * 250 + 100));
|
|
}
|
|
})
|
|
.catch(function(error) {
|
|
console.log('Error!: ' + error.message);
|
|
});
|
|
}
|
|
|
|
// NEUE IDEE ERFASSEN
|
|
|
|
map.addListener("click", (mapsMouseEvent) => {
|
|
newMarker(mapsMouseEvent.latLng);
|
|
|
|
setTimeout(() => {
|
|
openOverlay();
|
|
}, 800);
|
|
|
|
|
|
formularErstellen(mapsMouseEvent.latLng);
|
|
})
|
|
|
|
|
|
function newMarker(mousePosition) {
|
|
const newMarker = new google.maps.Marker({
|
|
|
|
position: mousePosition,
|
|
map: map,
|
|
animation: google.maps.Animation.DROP,
|
|
|
|
});
|
|
|
|
newMarker.setMap(map);
|
|
|
|
let icon = {url:"/images/ort.png", size: new google.maps.Size(30, 30)};
|
|
|
|
newMarker.setIcon("/images/newMarker.png");
|
|
|
|
$("#cancel").click(function() {
|
|
newMarker.setMap(null);
|
|
})
|
|
|
|
}
|
|
|
|
|
|
// CHANCEL location_button
|
|
|
|
// LOCATION BUTTON
|
|
|
|
let location_button = document.getElementById("currentLocation");
|
|
// map.controls[google.maps.ControlPosition.TOP_CENTER].push("location_button");
|
|
location_button.addEventListener("click", () => {
|
|
// Try HTML5 geolocation.
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const pos = {
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude,
|
|
};
|
|
|
|
const marker = new google.maps.Marker({
|
|
position: pos,
|
|
map: map,
|
|
icon: {
|
|
url: "/images/current_location.gif",
|
|
animation: google.maps.Animation.DROP,
|
|
scaledSize: new google.maps.Size(50, 50),
|
|
},
|
|
zIndex: 999
|
|
});
|
|
|
|
map.setCenter(pos);
|
|
},
|
|
() => {
|
|
handleLocationError(true, infoWindow, map.getCenter());
|
|
}
|
|
);
|
|
} else {
|
|
// Browser doesn't support Geolocation
|
|
handleLocationError(false, infoWindow, map.getCenter());
|
|
}
|
|
|
|
});
|
|
}
|