#870

maps done Co-Authored-By: litesh1123 <[email protected]> Co-Authored-By: Shivani <[email protected]>
apu52 · Jun 15, 2024 · 91f7e6f · 91f7e6f
1 parent 94cb263
commit 91f7e6f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -187,6 +187,8 @@ <h1>TourGuide . . .</h1>
 
         <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
             data-aos="fade-down">Login/SignUp</button></a>
+            <a href="mapa.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
+              data-aos="fade-down">view <map name=""></map></button></a>
 
         <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
               data-aos="fade-down" disabled>Log Out</button></a>

diff --git a/mapa.html b/mapa.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <title>Simple Map</title>
+
+    <link rel="stylesheet" type="text/css" href="maps.css" />
+    <script async
+    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap"
+
+    defer>
+</script>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <!-- prettier-ignore -->
+
+  </body>
+  <script type="module" src="maps.js"></script>
+
+</html>
diff --git a/maps.css b/maps.css
@@ -0,0 +1,17 @@
+/* 
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map. 
+ */
+ #map {
+    height: 100%;
+  }
+
+  /* 
+   * Optional: Makes the sample page fill the window. 
+   */
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
diff --git a/maps.js b/maps.js
@@ -0,0 +1,12 @@
+let map;
+
+async function initMap() {
+  const { Map } = await google.maps.importLibrary("maps");
+
+  map = new Map(document.getElementById("map"), {
+    center: { lat: -34.397, lng: 150.644 },
+    zoom: 8,
+  });
+}
+
+initMap();