feat: google maps

src/routes/space/[id]/+page.svelte

@@ -5,10 +5,13 @@
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
     import Report from "$lib/components/Report.svelte";
+    import { onMount } from "svelte";
+    import { gmapsLoader } from "$lib";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
+    const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
         space.study_space_images.length === 0
             ? [placeholder]
@@ -23,6 +26,23 @@
     function hideFunc() {
         isReportVisible = false;
     }
+
+    let mapElem = $state<HTMLDivElement>();
+    onMount(async () => {
+        if (!mapElem) return console.error("Map element not found");
+        const loader = await gmapsLoader();
+        const { Map } = await loader.importLibrary("maps");
+        const { AdvancedMarkerElement } = await loader.importLibrary("marker");
+        const map = new Map(mapElem, {
+            center: place.geometry?.location,
+            zoom: 15,
+            mapId: "9f4993cd3fb1504d495821a5"
+        });
+        const marker = new AdvancedMarkerElement({
+            position: place.geometry?.location,
+            map
+        });
+    });
 </script>
 
 <Navbar>
@@ -57,8 +77,14 @@
     <hr />
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
-        {space.building_location}
+        {#if place.name}
+            {place.name} <br />
+        {/if}
+        {#each place.formatted_address?.split(",") || [] as line (line)}
+            {line.trim()} <br />
+        {/each}
     </p>
+    <div class="addrMap" bind:this={mapElem}></div>
 
     <button
         type="button"
@@ -126,7 +152,7 @@
 
     .addrContainer {
         font-size: 1.2rem;
-        padding: 0rem 1.4rem;
+        padding: 0rem 1.4rem 1rem;
     }
 
     .tagContainer {
@@ -157,6 +183,11 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+
+    .addrMap {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+    }
     .reportButton {
         width: 100%;
         padding: 0.4rem;