eckertnoah/spinn_mit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

markers von datenbank laden (funktioneirt!!)

Browse Source
This commit is contained in:
Marlon Portmann 2022-10-26 16:51:39 +02:00
parent 5d94806c9f
commit 520f5c8de3
9 changed files with 96 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/style.css
View File

@ -0,0 +1,12 @@
h1 {
color: blue;
}
#map {
height: 100vh;
}
#location {
height: 30px;
width: 30px;
}

BIN
images/navigation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/ort.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

8
index.php
View File

@ -11,11 +11,17 @@ dbVerbindungErzeugen()
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPINN MIT!</title> <title>SPINN MIT!</title>
<link rel="stylesheet" href="/css/style.css">
</head> </head>
<body> <body>
<h1>Spinn mit!!!!</h1> <h1>spinn mit!!</h1>
<div id="map">
</div>
<script src="js/functions.js"></script> <script src="js/functions.js"></script>
<script src="js/main.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> </body>
</html> </html>

21
js/functions.js
View File

@ -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);
});
}

2
js/main.js
View File

@ -1 +1 @@
start();

0
js/markerKlicken Normal file
View File

75
loadMap.js Normal file
View File

@ -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);
});
}
}

2
system/alleMarkerHolen.php
View File

@ -5,7 +5,7 @@ require_once('data.php');
<?php <?php
$db = dbVerbindungErzeugen(); $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); $resultat = $db->query($sql);
$resultatArray = $resultat ->fetchAll(); $resultatArray = $resultat ->fetchAll();
echo json_encode($resultatArray); echo json_encode($resultatArray);