marker anklicken zeigt infos aus datenbank in DOM an

css/style.css

@@ -1,12 +1,33 @@
 h1 {
-  color: blue;
+  color: black;
 }
 
 #map {
   height: 100vh;
+  width: 80vh;
+  float: left;
 }
 
 #location {
   height: 30px;
   width: 30px;
 }
+
+#formular-wrapper {
+  height: 50vh;
+  width: 50vh;
+  float: left;
+}
+
+
+#idee {
+  height: 50vh;
+  width: 50vh;
+  float: left;
+}
+
+
+.ideeBilder {
+  width: 80px;
+  height: 80px;
+}

index.php

@@ -17,6 +17,21 @@ dbVerbindungErzeugen()
     <h1>spinn mit!!</h1>
     <div id="map">
     </div>
+<!--
+    <div class="formular-wrapper">
+      <form class="formular" action="https://751068-4.web.fhgr.ch/" method="post">
+      <label for="titel">Titel:</label>
+      <input type="text" name="titel"><br><br>
+      <label for="text">Text:</label>
+      <input type="text" name="text"><br><br>
+      <input type="submit" value="Formular Absenden">
+      </form>
+
+-->
+
+    </div>
+    <div id="idee">
+    </div>
 
     <script src="js/functions.js"></script>
     <script src="js/main.js"></script>

js/functions.js

@@ -0,0 +1,56 @@
+
+
+/* ideeSpeichern();
+function ideeSpeichern(titel, inhalt) {
+
+let  url = "system/ideeSpeichern.php";
+let formData = new FormData();
+formData.append('titel', titel);
+formData.append('inhalt', inhalt);
+fetch(url,
+  {
+    body: formData,
+    method: "post",
+  })
+  .then((response) => {
+    return response.json();
+  })
+  .then((markerData) => {
+
+
+
+
+  }
+  .catch(function(error) {
+    console.log("error: " + error.message);
+  });
+}
+
+*/
+
+function ideeAnzeigen(data) {
+  document.querySelectorAll('.loeschen').forEach(e => e.remove());
+  let titelErstellen = document.createElement("h1");
+  let titelInhalt = document.createTextNode(data.titel);
+  titelErstellen.appendChild(titelInhalt);
+  titelErstellen.classList.add("loeschen")
+  document.getElementById('idee').appendChild(titelErstellen);
+
+  let inhaltErstellen = document.createElement("p");
+  let inhaltInhalt = document.createTextNode(data.inhalt);
+  inhaltErstellen.appendChild(inhaltInhalt);
+  inhaltErstellen.classList.add("loeschen")
+  document.getElementById('idee').appendChild(inhaltErstellen);
+
+  let likesErstellen = document.createElement("p");
+  let likes = document.createTextNode(data.likes + " Likes");
+  likesErstellen.appendChild(likes);
+  likesErstellen.classList.add("loeschen")
+  document.getElementById('idee').appendChild(likesErstellen);
+
+  let bild = document.createElement("img");
+  bild.src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg";
+  bild.classList.add("ideeBilder")
+  bild.classList.add("loeschen")
+  document.getElementById('idee').appendChild(bild);
+}

loadMap.js

@@ -15,6 +15,8 @@ function initMap() {
       strictBounds: false,
     },
   zoom: 13,
+  disableDefaultUI: true,
+
 });
 infoWindow = new google.maps.InfoWindow();
 addMarkers();
@@ -29,20 +31,14 @@ addMarkers();
 
 
 
-
-
-
-
 function addMarkers(){
 
-
-  let  url = "system/alleMarkerHolen.php";
+  let  url = "system/alleInfosHolen.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({
@@ -56,8 +52,10 @@ function addMarkers(){
              animation: google.maps.Animation.DROP,
 
            });
+
+
          marker.addListener("click", () => {
-         console.log("hello this is idea number:" + markerData[i].titel);
+          ideeAnzeigen(markerData[i]);
          })
        }
        else {
@@ -70,7 +68,7 @@ function addMarkers(){
 
     })
     .catch(function(error) {
-      console.log('Error: ' + error.message);
+      console.log('Error!: ' + error.message);
     });
   }
 

system/alleInfosHolen.php

@@ -0,0 +1,12 @@
+<?php
+require_once('data.php');
+?>
+
+<?php
+
+  $db = dbVerbindungErzeugen();
+	$sql = "SELECT * FROM idee";
+	$resultat = $db->query($sql);
+	$resultatArray = $resultat ->fetchAll();
+	echo json_encode($resultatArray);
+ ?>

system/ideeSpeichern.php

@@ -0,0 +1,23 @@
+<?php
+require_once('data.php');
+?>
+
+
+<?php
+
+  $db = dbVerbindungErzeugen();
+
+    if(isset($_POST['titel'])){
+    $titel = $_POST['titel'];
+  }
+  if(isset($_POST['inhalt'])){
+    $inhalt = $_POST['inhalt'];
+  }
+
+$sql = "INSERT INTO idee (titel, inhalt) VALUES (?, ?)";
+$stmt = $db->prepare($sql);
+$stmt->execute(array($titel, $inhalt));
+
+echo $db->lastInsertId();
+
+  ?>