Rendering the google Map

package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "overheard",
 			"version": "0.0.1",
+			"dependencies": {
+				"@googlemaps/js-api-loader": "^2.1.0"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^7.0.1",
 				"@sveltejs/kit": "^2.57.0",
@@ -49,6 +52,15 @@
 				"tslib": "^2.4.0"
 			}
 		},
+		"node_modules/@googlemaps/js-api-loader": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-2.1.0.tgz",
+			"integrity": "sha512-aZii781WEfncmJAFk1UPv6bdwT1mgRZzY8IWmpmx9mGAMCt97JZrXpn95LTsYinj7E4tC+LJv3FE8k2xRAsYgg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@types/google.maps": "^3.53.1"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -513,6 +525,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/google.maps": {
+			"version": "3.65.0",
+			"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.65.0.tgz",
+			"integrity": "sha512-u4SHiRC3m27lPa4vDBxh2AI7mDcHcheX6GSHn1Mwi0Gap8/uhM2kFppiFTnWASXLHZO+1ahHciLeEIV+Sjqk/A==",
+			"license": "MIT"
+		},
 		"node_modules/@types/trusted-types": {
 			"version": "2.0.7",
 			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",

package.json

@@ -15,5 +15,8 @@
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"svelte": "^5.55.2",
 		"vite": "^8.0.7"
+	},
+	"dependencies": {
+		"@googlemaps/js-api-loader": "^2.1.0"
 	}
 }

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>
+<script>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+    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>