rendering pins on map based on firestore document

src/lib/components/MapView.Svelte

@@ -1,13 +1,16 @@
 <script>
     import { onMount } from 'svelte';
     import { env } from '$env/dynamic/public';
+    import { messagesStore } from '$lib/stores/messagesStore.js'; // pass the messages store here 
 
     // 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 { lat, lng } = $props();
 
-    let mapDiv; // reference ot the map <div> below
+    let mapDiv;
+
+    let markers = []; // keep track of pins on map
 
     onMount (async () => {
         const centerLat = Number(lat);
@@ -21,13 +24,36 @@
 
         const { Map } = await importLibrary('maps');
 
-        new Map(mapDiv, {
+        mapDiv = new Map(mapDiv, {
             center: { lat: centerLat, lng: centerLng },
             zoom: 15,
             disableDefaultUI: true,
             gestureHandling: 'greedy'
         });
     });
+
+    // function to rended pins
+    function renderPins(messages) {
+        // clear current pins
+        markers.forEach(marker => marker.setMap(null)); // make them not show up
+        markers = [];  // reset the array
+
+        messages.forEach(message => {
+            const marker = new google.maps.Marker({
+                position: { lat: message.lat, lng: message.lng}, // lat and lng is what is called in the firestore documents
+                map: mapDiv,
+                title: message.text // firestore field for messages
+            });
+            markers.push(marker); // add the new pin to the array 
+        });
+    }
+
+    // this is a reactive statement so anytime the store changes it updates
+    $effect(() => {
+        if (mapDiv && $messagesStore.length > 0 ){ // if they both exist
+            renderPins($messagesStore); // we put pins on the map
+        }
+    })
 </script>
 
 <div class="map" bind:this={mapDiv}></div>