Fixed double script load from Google Maps

src/components/elements/TheMapInstance.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { useRoute } from 'vue-router'
 import { GoogleMap } from 'vue3-google-map'
+import { computed } from 'vue'
 import { useMap } from '@/stores/map'
 import { i18n } from '@/i18n/i18n-setup'
 import { useInitialMapPosition } from '@/composables/useInitialMapPosition'
@@ -38,11 +39,18 @@ const mapGestureBehaviour
   = typeof gestureBehaviourParam === 'string' && ['cooperative', 'greedy', 'none', 'auto'].includes(gestureBehaviourParam)
     ? gestureBehaviourParam as GestureBehaviour
     : 'greedy'
+
+const apiKey = computed(() => {
+  const apiKey = import.meta.env.VITE_GOOGLE_MAP_KEY
+  if (!apiKey)
+    throw new Error('Google Maps API key not found')
+  return apiKey
+})
 </script>
 
 <template>
   <GoogleMap
-    ref="mapInstance" :language="i18n.locale" disable-default-ui :gesture-handling="mapGestureBehaviour" :keyboard-shortcuts="false"
+    ref="mapInstance" :api-key="apiKey" :language="i18n.locale" disable-default-ui :gesture-handling="mapGestureBehaviour" :keyboard-shortcuts="false"
     class="w-full h-full" :styles="googleMapStyles" :max-zoom="21" :min-zoom="3" :restriction="restriction" :clickable-icons="false"
     @idle.once="setInitialMapPosition"
   >

src/main.ts

@@ -1,7 +1,6 @@
 import '@fontsource/mulish/variable.css'
 import { createPinia } from 'pinia'
 import { createApp, markRaw } from 'vue'
-import { Loader } from '@googlemaps/js-api-loader'
 import App from './App.vue'
 import { detectLanguage, i18nRegistration, setLanguage } from './i18n/i18n-setup'
 import './index.css'
@@ -21,10 +20,4 @@ app.use(pinia)
 app.use(router)
 app.use(i18nRegistration)
 
-// FIXME
-// Vue 3 Google Maps is supposed to load the Google Maps API for us, but it doesn't work for some reason
-// https://github.com/inocan-group/vue3-google-map/blob/9e33d341d4ba31fdc0dc43acc36989e010b5c996/src/components/GoogleMap.vue#L327-L335
-// I tried many things, but this is the only thing that worked
-new Loader({ apiKey: import.meta.env.VITE_GOOGLE_MAP_KEY, version: 'weekly' }).importLibrary('places').then(() => {
-  app.mount('#app')
-})
+app.mount('#app')