<ScriptGoogleMaps>

The <ScriptGoogleMaps> component is a wrapper around the useScriptGoogleMaps() composable. It provides a simple way to embed Google Maps in your Nuxt app.

It's optimized for performance by using the Element Event Triggers, only loading the Google Maps when specific elements events happen.

Before Google Maps loads, it shows a placeholder using Maps Static API.

By default, it will load on the mouseenter, mouseover, and mousedown events.

See the Facade Component API for all props, events, and slots.

To subscribe to Google Map events, you can use the ready event.

<script setup lang="ts">
function handleReady({ map }: { map: ShallowRef<google.maps.Map | undefined> }) {
  watch(map, (m) => {
    if (!m)
      return
    m.addListener('center_changed', () => {
      console.log('Center changed', m.getCenter())
    })
  }, { immediate: true })
}
</script>

<template>
  <ScriptGoogleMaps @ready="handleReady" />
</template>

Slots

The component provides minimal UI by default, only enough to be functional and accessible. There are a number of slots for you to customize the maps however you like.

default

The default slot displays content that will always be visible.

<template>
  <ScriptGoogleMaps>
    <div class="absolute top-0 left-0 right-0 p-5 bg-white text-black">
      <h1 class="text-xl font-bold">
        My Custom Map
      </h1>
    </div>
  </ScriptGoogleMaps>
</template>

awaitingLoad

Shown before the user triggers the map to load (e.g. before hover/click). Use this to show a call-to-action overlay on top of the static placeholder.

<template>
  <ScriptGoogleMaps>
    <template #awaitingLoad>
      <div class="bg-blue-500 text-white p-5">
        Click to load the map!
      </div>
    </template>
  </ScriptGoogleMaps>
</template>

loading

Shown after the user triggers loading but before the map is interactive (script is being fetched/initialized).

Note: This shows a ScriptLoadingIndicator by default for accessibility and UX, by providing a slot you will override this component. Make sure you provide a loading indicator.

<template>
  <ScriptGoogleMaps>
    <template #loading>
      <div class="bg-blue-500 text-white p-5">
        Loading...
      </div>
    </template>
  </ScriptGoogleMaps>
</template>

placeholder

This slot displays a placeholder image before Google Maps loads. By default, this will show the Google Maps Static API image for the map.

Provide custom #placeholder content without rendering the provided placeholder URL to skip the Static Maps API request and avoid those charges.

<template>
  <ScriptGoogleMaps>
    <template #placeholder="{ placeholder }">
      <img :src="placeholder">
    </template>
  </ScriptGoogleMaps>
</template>