.env.example

@@ -1,2 +1,3 @@
 PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
 PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
+PUBLIC_GMAPS_API_KEY=your-google-maps-api-key-here

.gitlab-ci.yml

@@ -21,6 +21,7 @@ check_types:
   variables:
     PUBLIC_SUPABASE_URL: $SUPABASE_URL
     PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
+    PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
   script:
     - npm run check
 
@@ -72,6 +73,7 @@ build:
   variables:
     PUBLIC_SUPABASE_URL: $SUPABASE_URL
     PUBLIC_SUPABASE_ANON_KEY: $SUPABASE_ANON_KEY
+    PUBLIC_GMAPS_API_KEY: $GMAPS_API_KEY
   script:
     - npm run build
   artifacts:

package-lock.json

@@ -8,6 +8,7 @@
             "name": "drp-48",
             "version": "0.0.1",
             "dependencies": {
+                "@googlemaps/js-api-loader": "^1.16.8",
                 "@supabase/ssr": "^0.6.1",
                 "@supabase/supabase-js": "^2.49.8",
                 "posthog-js": "^1.250.1"
@@ -15,12 +16,14 @@
             "devDependencies": {
                 "@eslint/compat": "^1.2.5",
                 "@eslint/js": "^9.18.0",
+                "@googlemaps/typescript-guards": "^2.0.3",
                 "@playwright/test": "^1.49.1",
                 "@sveltejs/adapter-node": "^5.2.12",
                 "@sveltejs/kit": "^2.16.0",
                 "@sveltejs/vite-plugin-svelte": "^5.0.0",
                 "@testing-library/jest-dom": "^6.6.3",
                 "@testing-library/svelte": "^5.2.4",
+                "@types/google.maps": "^3.58.1",
                 "eslint": "^9.18.0",
                 "eslint-config-prettier": "^10.0.1",
                 "eslint-plugin-svelte": "^3.0.0",
@@ -819,6 +822,19 @@
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
         },
+        "node_modules/@googlemaps/js-api-loader": {
+            "version": "1.16.8",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
+            "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/@googlemaps/typescript-guards": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@googlemaps/typescript-guards/-/typescript-guards-2.0.3.tgz",
+            "integrity": "sha512-3iHuO8H0jPehftsMK0kgyJzPYU/g/oiTRw+wu/yltqSZ7wJPt3vfsJHkPiuRpQjbnnWygX+T3mkRGyK/eyZ/lw==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1725,6 +1741,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/google.maps": {
+            "version": "3.58.1",
+            "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+            "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

package.json

@@ -20,12 +20,14 @@
     "devDependencies": {
         "@eslint/compat": "^1.2.5",
         "@eslint/js": "^9.18.0",
+        "@googlemaps/typescript-guards": "^2.0.3",
         "@playwright/test": "^1.49.1",
         "@sveltejs/adapter-node": "^5.2.12",
         "@sveltejs/kit": "^2.16.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.4",
+        "@types/google.maps": "^3.58.1",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-svelte": "^3.0.0",
@@ -42,6 +44,7 @@
         "vitest": "^3.0.0"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.8",
         "@supabase/ssr": "^0.6.1",
         "@supabase/supabase-js": "^2.49.8",
         "posthog-js": "^1.250.1"

src/lib/components/inputs/Text.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
     interface Props {
+        inputElem?: HTMLInputElement;
         name: string;
         value?: string | null;
         placeholder?: string;
         required?: boolean;
     }
 
-    let { value = $bindable(), name, ...rest }: Props = $props();
+    let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
 </script>
 
-<input type="text" id={name} {name} bind:value {...rest} />
+<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
 
 <style>
     input {

src/lib/database.d.ts

@@ -100,7 +100,8 @@ export type Database = {
       }
       study_spaces: {
         Row: {
-          building_location: string | null
+          building_location: Json | null
+          building_location_old: string | null
           created_at: string | null
           description: string | null
           id: string
@@ -112,7 +113,8 @@ export type Database = {
           wifi: string
         }
         Insert: {
-          building_location?: string | null
+          building_location?: Json | null
+          building_location_old?: string | null
           created_at?: string | null
           description?: string | null
           id?: string
@@ -124,7 +126,8 @@ export type Database = {
           wifi: string
         }
         Update: {
-          building_location?: string | null
+          building_location?: Json | null
+          building_location_old?: string | null
           created_at?: string | null
           description?: string | null
           id?: string

src/lib/index.ts

@@ -1,3 +1,4 @@
+import { PUBLIC_GMAPS_API_KEY } from "$env/static/public";
 import type { Database } from "./database.d.ts";
 
 export type Table<T extends keyof Database["public"]["Tables"]> =
@@ -30,3 +31,12 @@ export const reportTypes = [
     "Incorrect content",
     "Other"
 ];
+
+export async function gmapsLoader() {
+    const { Loader } = await import("@googlemaps/js-api-loader");
+    return new Loader({
+        apiKey: PUBLIC_GMAPS_API_KEY,
+        version: "weekly",
+        libraries: ["places"]
+    });
+}

src/routes/space/+page.svelte

@@ -7,15 +7,30 @@
     import Button from "$lib/components/Button.svelte";
     import Images from "$lib/components/inputs/Images.svelte";
     import type { Table } from "$lib";
-    import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
+    import {
+        availableStudySpaceTags,
+        wifiTags,
+        powerOutletTags,
+        volumeTags,
+        gmapsLoader
+    } from "$lib";
+    import { onMount } from "svelte";
+    import type { Json } from "$lib/database.js";
     const { data } = $props();
     const { supabase } = $derived(data);
 
     let spaceImgs = $state<FileList>();
     let uploading = $state(false);
-    let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
+    let studySpaceData = $state<
+        Omit<
+            Table<"study_spaces">,
+            "id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
+        > & {
+            building_location?: google.maps.places.PlaceResult;
+        }
+    >({
         description: "",
-        building_location: "",
+        building_location: undefined,
         location: "",
         tags: [],
         volume: "",
@@ -25,10 +40,14 @@
 
     async function uploadStudySpace() {
         if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
+        if (!studySpaceData.building_location) return alert("Please select a building location.");
 
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
-            .insert(studySpaceData)
+            .insert({
+                ...studySpaceData,
+                building_location: studySpaceData.building_location as Json
+            })
             .select()
             .single();
         if (studySpaceError)
@@ -92,6 +111,19 @@
             tagFilter = "";
         };
     }
+
+    let addressInput = $state<HTMLInputElement>();
+    onMount(async () => {
+        const loader = await gmapsLoader();
+        const places = await loader.importLibrary("places");
+        if (!addressInput) return console.error("Address input element not found");
+        const placeAutocomplete = new places.Autocomplete(addressInput, {
+            componentRestrictions: { country: "gb" }
+        });
+        placeAutocomplete.addListener("place_changed", () => {
+            studySpaceData.building_location = placeAutocomplete.getPlace();
+        });
+    });
 </script>
 
 <Navbar>
@@ -211,7 +243,7 @@
     <label for="building-location">Add the building location:</label>
     <Text
         name="building-location"
-        bind:value={studySpaceData.building_location}
+        bind:inputElem={addressInput}
         placeholder="Huxley Building, Imperial South Kensington Campus"
         required
     />

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"
+        });
+        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;

supabase/migrations/20250609145614_gmaps_location.sql

@@ -0,0 +1,3 @@
+-- rename old colum nto building_location_old and create a new column instead of altering
+alter table "public"."study_spaces" rename column "building_location" to "building_location_old";
+alter table "public"."study_spaces" add column "building_location" jsonb;

supabase/schemas/0001_study_spaces.sql

@@ -11,7 +11,9 @@ CREATE TABLE study_spaces (
     description text,
     -- Location within building, e.g., "Room 101"
     location text,
-    building_location text,
+    -- Not bothered to write a proper data migration
+    building_location_old text,
+    building_location jsonb,
     tags text[] NOT NULL DEFAULT array[]::text[],
     volume text NOT NULL,
     wifi text NOT NULL,