added google maps api script in my-place/index.html + created LoadedP…

…lace class in MyPlace.js
sofiane-abou-abderrahim · Oct 18, 2023 · 815af46 · 815af46
1 parent f90e4b3
commit 815af46
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/dist/index.html b/dist/index.html
@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="assets/styles/share-place.css" />
     <script
       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype"
-      async
       defer
     ></script>
     <script src="assets/scripts/SharePlace.js" defer></script>

diff --git a/dist/my-place/index.html b/dist/my-place/index.html
@@ -7,6 +7,10 @@
     <title>My Place</title>
     <link rel="stylesheet" href="../assets/styles/app.css" />
     <link rel="stylesheet" href="../assets/styles/my-place.css" />
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=Function.prototype"
+      defer
+    ></script>
     <script src="../assets/scripts/MyPlace.js" defer></script>
   </head>
   <body>

diff --git a/src/MyPlace.js b/src/MyPlace.js
@@ -0,0 +1,34 @@
+import { Map } from './UI/Map';
+
+class LoadedPlace {
+  constructor(coordinates, address) {
+    new Map(coordinates);
+    const headerTitleEl = document.querySelector('header h1');
+    headerTitleEl.textContent = address;
+  }
+}
+
+/*
+
+Now after this, we can instantiate this LoadedPlace class
+and we have to parse some data from the URL,
+so we'll call "new LoadedPlace" and I'll need to forward "coordinates" an "address"
+and that is part of the URL and needs to be parsed.
+
+For that, there is a built-in URL constructor function or class, however you want to call it
+=> new URL()
+
+*/
+
+const url = new URL(location.href);
+// "location.href" is the current location
+// new URL() creates an object with options for us to get information out of that URL
+const queryParams = url.searchParams;
+// So this will be our dynamic options here, so the thing after the question mark basically,
+// stored as key-value pairs in queryParams now, thanks to searchParams
+const coords = {
+  lat: parseFloat(queryParams.get('lat')), // converted into a number by adding a + or parseFloat()
+  lng: +queryParams.get('lng') // converted into a number by adding a + or parseFloat()
+};
+const address = queryParams.get('address');
+new LoadedPlace(coords, address);