2022-10-26 16:51:39 +02:00
|
|
|
|
2022-11-14 16:27:53 +01:00
|
|
|
const zuerich_bounds = {
|
2022-10-26 16:51:39 +02:00
|
|
|
north: 47.41590970260092,
|
|
|
|
south: 47.315703309031846,
|
|
|
|
west: 8.45742642179812,
|
|
|
|
east: 8.600047733589026,
|
|
|
|
};
|
2022-11-14 16:27:53 +01:00
|
|
|
|
2022-10-26 16:51:39 +02:00
|
|
|
function initMap() {
|
|
|
|
const map = new google.maps.Map(document.getElementById('map'), {
|
|
|
|
mapId: "fd4581e1612d9ef",
|
|
|
|
center: {lat: 47.38109493760974, lng: 8.521861488204763},
|
|
|
|
restriction: {
|
2022-11-14 16:27:53 +01:00
|
|
|
latLngBounds: zuerich_bounds,
|
2022-10-26 16:51:39 +02:00
|
|
|
strictBounds: false,
|
|
|
|
},
|
|
|
|
zoom: 13,
|
2022-10-27 12:35:35 +02:00
|
|
|
disableDefaultUI: true,
|
2022-11-14 16:27:53 +01:00
|
|
|
gestureHandling: "greedy",
|
2022-10-27 12:35:35 +02:00
|
|
|
|
2022-10-26 16:51:39 +02:00
|
|
|
});
|
|
|
|
infoWindow = new google.maps.InfoWindow();
|
|
|
|
addMarkers();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addMarkers(){
|
2022-10-26 16:59:10 +02:00
|
|
|
|
2022-10-27 12:35:35 +02:00
|
|
|
let url = "system/alleInfosHolen.php";
|
2022-10-26 16:51:39 +02:00
|
|
|
fetch(url)
|
|
|
|
.then((response) => {
|
|
|
|
return response.json();
|
|
|
|
})
|
|
|
|
.then((markerData) => {
|
|
|
|
for (let i = 0; i < markerData.length; i++) {
|
|
|
|
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/ort.png",
|
2022-10-26 16:59:10 +02:00
|
|
|
scaledSize: new google.maps.Size(38+(markerData[i].likes), 38+(markerData[i].likes)),
|
2022-10-26 16:51:39 +02:00
|
|
|
},
|
|
|
|
animation: google.maps.Animation.DROP,
|
|
|
|
|
|
|
|
});
|
2022-10-27 12:35:35 +02:00
|
|
|
|
|
|
|
|
2022-10-26 16:51:39 +02:00
|
|
|
marker.addListener("click", () => {
|
2022-10-27 12:35:35 +02:00
|
|
|
ideeAnzeigen(markerData[i]);
|
2022-11-14 16:27:53 +01:00
|
|
|
|
2022-10-26 16:51:39 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch(function(error) {
|
2022-10-27 12:35:35 +02:00
|
|
|
console.log('Error!: ' + error.message);
|
2022-10-26 16:51:39 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-11-14 16:27:53 +01:00
|
|
|
// NEUE IDEE ERFASSEN
|
|
|
|
|
|
|
|
map.addListener("click", (mapsMouseEvent) => {
|
|
|
|
newMarker(mapsMouseEvent.latLng);
|
|
|
|
|
|
|
|
formularErstellen(mapsMouseEvent.latLng);
|
|
|
|
})
|
2022-10-27 17:33:19 +02:00
|
|
|
|
|
|
|
|
2022-11-14 16:27:53 +01:00
|
|
|
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.jpg");
|
|
|
|
|
|
|
|
$("#cancel").click(function() {
|
|
|
|
document.getElementById("idee").innerHTML = "";
|
|
|
|
newMarker.setMap(null);
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2022-10-27 17:33:19 +02:00
|
|
|
|
2022-11-14 16:27:53 +01:00
|
|
|
// CHANCEL location_button
|
2022-10-27 17:33:19 +02:00
|
|
|
|
|
|
|
// 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.png",
|
|
|
|
animation: google.maps.Animation.DROP,
|
|
|
|
scaledSize: new google.maps.Size(50, 50)
|
|
|
|
}});
|
|
|
|
|
|
|
|
map.setCenter(pos);
|
|
|
|
},
|
|
|
|
() => {
|
|
|
|
handleLocationError(true, infoWindow, map.getCenter());
|
|
|
|
}
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
// Browser doesn't support Geolocation
|
|
|
|
handleLocationError(false, infoWindow, map.getCenter());
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
2022-10-26 16:51:39 +02:00
|
|
|
}
|