diff --git a/css/style.css b/css/style.css index e69de29..23e3ebc 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,12 @@ +h1 { + color: blue; +} + +#map { + height: 100vh; +} + +#location { + height: 30px; + width: 30px; +} diff --git a/images/navigation.png b/images/navigation.png new file mode 100644 index 0000000..26e4a10 Binary files /dev/null and b/images/navigation.png differ diff --git a/images/ort.png b/images/ort.png new file mode 100644 index 0000000..8048a7b Binary files /dev/null and b/images/ort.png differ diff --git a/index.php b/index.php index 8fca379..de2e73d 100644 --- a/index.php +++ b/index.php @@ -11,11 +11,17 @@ dbVerbindungErzeugen() SPINN MIT! + -

Spinn mit!!!!

+

spinn mit!!

+
+
+ + diff --git a/js/functions.js b/js/functions.js index fe574ac..e69de29 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1,21 +0,0 @@ - - - - -function start(){ - let url = "system/alleMarkerHolen.php"; - fetch(url) - .then((response) => { - return response.json(); - }) - .then((markerData) => { - console.log(markerData) - - - - }) - .catch(function(error) { - console.log('Error: ' + error.message); - }); - } - diff --git a/js/main.js b/js/main.js index 05ab333..8b13789 100644 --- a/js/main.js +++ b/js/main.js @@ -1 +1 @@ -start(); \ No newline at end of file + diff --git a/js/markerKlicken b/js/markerKlicken new file mode 100644 index 0000000..e69de29 diff --git a/loadMap.js b/loadMap.js new file mode 100644 index 0000000..b6230b9 --- /dev/null +++ b/loadMap.js @@ -0,0 +1,75 @@ + +const zuerich_bounds = { + north: 47.41590970260092, + south: 47.315703309031846, + west: 8.45742642179812, + east: 8.600047733589026, +}; + +function initMap() { + const map = new google.maps.Map(document.getElementById('map'), { + mapId: "fd4581e1612d9ef", + center: {lat: 47.38109493760974, lng: 8.521861488204763}, + restriction: { + latLngBounds: zuerich_bounds, + strictBounds: false, + }, + zoom: 13, +}); +infoWindow = new google.maps.InfoWindow(); +addMarkers(); + + + + + + + + + + + + + + + +function addMarkers(){ + let url = "system/alleMarkerHolen.php"; + fetch(url) + .then((response) => { + return response.json(); + }) + .then((markerData) => { + console.log("test"); + 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", + scaledSize: new google.maps.Size(38, 38), + }, + animation: google.maps.Animation.DROP, + + }); + marker.addListener("click", () => { + console.log("hello this is idea number:" + markerData[i].titel); + }) + } + else { + + } + } + + + + + }) + .catch(function(error) { + console.log('Error: ' + error.message); + }); + } + +} diff --git a/system/alleMarkerHolen.php b/system/alleMarkerHolen.php index 7f639df..76835e7 100644 --- a/system/alleMarkerHolen.php +++ b/system/alleMarkerHolen.php @@ -5,7 +5,7 @@ require_once('data.php'); query($sql); $resultatArray = $resultat ->fetchAll(); echo json_encode($resultatArray);