Docs: Google Maps example is not working

[MickL]

I was trying to use the example:

<script setup lang="ts">
const { $script } = useScriptGoogleMaps({
  apiKey: 'key'
})
$script.then(({ maps }) => {
  const map = new maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
  })
})
</script>

But I get a type error in my IDE: Property Map does not exist on type typeof maps | Promise<typeof maps>

As well as an error in Vue/Nuxt: Uncaught (in promise) TypeError: maps.Map is not a constructor

[harlan-zw]

Hi, thanks for the issue. I'll need to update the docs but the types are a bit messed up. You can see how the <ScriptGoogleMaps> component handles that here: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptGoogleMaps.vue#L147

I would recommend using this component over using the script generally.

[MickL]

Hey thanks for the quick response!

I am using the component atm but I dont like that is is initially using a static map because the static map has a max width/height and therefor looks blurred on bigger screens and especially on high dpi screens. As there seems to be no option to disable it I was thinking I might integrate the map myself.

[MickL]

@harlan-zw Can we maybe have an option do disable the static map feature and immediately load the real map?

[harlan-zw]

Latest release has some improvements to maps, to answer your questions though:

If you'd like to disable the static map you can simply provide the placeholder slot.

<template>
  <ScriptGoogleMaps ...>
     <template #placeholder>
        <!-- my custom placeholder -->
     </template>
  </ScriptGoogleMaps>
</template>

If you'd like to load the maps as soon as possible you can set the trigger to immediate.

<template>
  <ScriptGoogleMaps trigger="immediate">
  </ScriptGoogleMaps>
</template>