markers von datenbank laden (funktioneirt!!)

2022-10-26 16:51:39 +02:00 · 2022-10-26 16:51:39 +02:00 · 520f5c8de3
parent 5d94806c9f
commit 520f5c8de3
9 changed files with 96 additions and 24 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,12 @@
+h1 {
+  color: blue;
+}
+
+#map {
+  height: 100vh;
+}
+
+#location {
+  height: 30px;
+  width: 30px;
+}
--- a/images/navigation.png
+++ b/images/navigation.png
--- a/images/ort.png
+++ b/images/ort.png
--- a/index.php
+++ b/index.php
@ -11,11 +11,17 @@ dbVerbindungErzeugen()
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPINN MIT!</title>
+    <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
-    <h1>Spinn mit!!!!</h1>
+    <h1>spinn mit!!</h1>
+    <div id="map">
+    </div>

    <script src="js/functions.js"></script>
    <script src="js/main.js"></script>
+    <script src="loadMap.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkfYzlFa9nljVhIyfPQoz3n7Zi5TOs4WQ&callback=initMap"
+      defer ></script>
 </body>
 </html>
--- 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);
-      });
-  }
-  
--- a/js/main.js
+++ b/js/main.js
@ -1 +1 @@
-start();
+
--- a/js/markerKlicken
+++ b/js/markerKlicken
--- a/loadMap.js
+++ 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);
+    });
+  }
+
+}
--- a/system/alleMarkerHolen.php
+++ b/system/alleMarkerHolen.php
@ -5,7 +5,7 @@ require_once('data.php');
 <?php

  $db = dbVerbindungErzeugen();
-	$sql = "SELECT idee.koordiatenLat, idee.koordiatenLng, idee.likes, idee.id FROM idee;";
+	$sql = "SELECT idee.koordinatenLat, idee.koordinatenLng, idee.likes, idee.id, idee.sichtbarkeit, idee.titel FROM idee;";
 	$resultat = $db->query($sql);
 	$resultatArray = $resultat ->fetchAll();
 	echo json_encode($resultatArray);