Setting Google Map Markers in Vue3 / Pinia

Question

I'd like to show markers based on data fetched from a vue3 pinia store. I'm having difficulty setting my first marker on the map:

<script setup>
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'
import { useDiscoverItemStore } from "@/stores/DiscoverItemStore"
const discoverStore = useDiscoverItemStore()

const MAPS_API_KEY = 'api-key'

const loader = new Loader({ apiKey: MAPS_API_KEY })
const mapDiv = ref(null)
let map = ref(null)

onMounted(async () => {
  await loader.load()
  map.value = new google.maps.Map(mapDiv.value, {
    center: currPos.value,
    zoom: 13,
  })

  await discoverStore.fetchItems()
  let loc = new google.maps.LatLng(discoverStore.items[0].location[0], discoverStore.items[0].location[1])

  console.log(loc)
  let marker = new google.maps.Marker({
    position: loc,
    map, // have also tried `map: map` 
    title: "Hello World!",
  })

  // have also tried `marker.setMap(map)`
})
</script>

My console is telling me that setMap: not an instance of Map; and not an instance of StreetViewPanorama setMap: not an instance of Map; and not an instance of StreetViewPanorama . Here's the full readout from my console:

Why can't I add this marker to my google maps map ref ? Any ideas would be greatly appreciated.

Answer 1

Your Google map instance is on map.value

  let marker = new google.maps.Marker({
    position: loc,
    map: map.value,
    title: "Hello World!",
  })