Rendering the google Map

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>