Rendering the google Map

src/lib/components/MapView.Svelte

@@ -0,0 +1,37 @@
+<script>
+    import { onMount } from 'svelte';
+    import { env } from '$env/dynamic/public';
+
+    // export let latitude;
+    // export let longitude;
+    // ^ this didn't work for some reason, so instead we get the props like this: (based on internet research this is the fix)
+    let { latitude, longitude } = $props();
+
+    let mapDiv; // reference ot the map <div> below
+    
+    onMount (async () => {
+        const { setOptions, importLibrary } = await import('@googlemaps/js-api-loader');
+        setOptions({
+            apiKey: env.PUBLIC_MAPS_KEY,
+            version: 'weekly',
+        });
+
+        const { Map } = await importLibrary('maps');
+
+        new Map(mapDiv, {
+            center: { lat: latitude, lng: longitude },
+            zoom: 15,
+            disableDefaultUI: true,
+            gestureHandling: 'greedy'
+        });
+    });
+</script>
+
+<div class="map" bind:this={mapDiv}></div>
+
+<style>
+    .map {
+        width: 100%;
+        min-height: 100vh;
+    }
+</style>

src/routes/+page.svelte

@@ -1,2 +1,50 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+    import { onMount } from 'svelte';
+    import MapView from '$lib/components/MapView.svelte';
+
+    let latitude = $state();
+    let longitude = $state();
+    let error = $state();
+
+    onMount(() => {
+        if (!navigator.geolocation) {
+            error = "Your browser doesn't support geolocation :(";
+            return; // do nothing
+        }
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                latitude = position.coords.latitude;
+                longitude = position.coords.longitude;
+            },
+            () => {
+                error = "Location access denied. Please enable location to use Overheard.";
+            }
+        );
+    });
+</script>
+
+{#if error}
+    <p class="error">{error}</p>
+{:else if latitude && longitude}
+    <MapView {latitude} {longitude} />
+{:else}
+    <p class="loading">Looking for you...</p>
+{/if}
+
+<style>
+:global(body) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.error, .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    color: #666;
+
+}
+</style>