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>