...

css/style.css

@@ -1,8 +1,26 @@
+
+
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+
+
+
+
 h1 {
   color: black;
 }
 
 #overlay{
+  position: absolute;
+  top: 10vh;
+  height: 90vh;
+  background: wheat;
 
 }
 
@@ -15,20 +33,30 @@ h1 {
 }
 
 #map {
-  height: 50vh;
+  height: 100vh;
-  width: 100%;
+  width: 100vw;
   float: left;
 }
 
-#location {
+#currentLocation {
-  height: 30px;
+  height: 80px;
-  width: 30px;
+  width: 80px;
+  z-index: 100;
 }
 
-#MapControls {
+.MapControls {
-  height: 50vh;
+  height: 300px;
-  width: 50vh;
+  width: 100px;
-  float: left;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: end;
+
+
+
+
 }
 
 
@@ -50,10 +78,6 @@ h1 {
   height: 80px;
 }
 
-#currentLocation {
-  height: 30px;
-  width: 30px;
-}
 
 #cancel {
   width: 60px;

loadMap.js

@@ -56,6 +56,7 @@ function addMarkers(){
 
          marker.addListener("click", () => {
           ideeAnzeigen(markerData[i]);
+          
           openOverlay();
           
          })
@@ -74,7 +75,11 @@ function addMarkers(){
 
 map.addListener("click", (mapsMouseEvent) => {
   newMarker(mapsMouseEvent.latLng);
-  openOverlay();
+
+  setTimeout(() => {
+    openOverlay();
+  }, 800);
+  
 
   formularErstellen(mapsMouseEvent.latLng);
 })