diff --git a/eslint.config.mjs b/eslint.config.mjs
index c32fa206..25d2c830 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -54,4 +54,14 @@ export default antfu(
       'no-new': 'off',
     },
   },
+  {
+    // SFCs with two <script> blocks (one for exported types, one for setup)
+    // confuse `import/first`: it concatenates the blocks and reports the
+    // setup-block imports as "below the body of the module" because the
+    // first block has exports.
+    files: ['**/*.vue'],
+    rules: {
+      'import/first': 'off',
+    },
+  },
 )
diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
index 5ae811fb..8a37d4ef 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
@@ -2,26 +2,13 @@
 /// <reference types="google.maps" />
 import type { ElementScriptTrigger } from '#nuxt-scripts/types'
 import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue'
-import { useScriptTriggerElement } from '#nuxt-scripts/composables/useScriptTriggerElement'
-import { useScriptGoogleMaps } from '#nuxt-scripts/registry/google-maps'
-import { scriptRuntimeConfig, scriptsPrefix } from '#nuxt-scripts/utils'
-import { defu } from 'defu'
-import { tryUseNuxtApp, useHead, useRuntimeConfig } from 'nuxt/app'
-import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, useAttrs, watch } from 'vue'
-import ScriptAriaLoadingIndicator from '../ScriptAriaLoadingIndicator.vue'
-
-import { MAP_INJECTION_KEY } from './useGoogleMapsResource'
-
-const DIGITS_ONLY_RE = /^\d+$/
-const DIGITS_PX_RE = /^\d+px$/i
 
 export { MAP_INJECTION_KEY } from './useGoogleMapsResource'
-</script>
 
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
+export interface ScriptGoogleMapsProps {
   /**
    * Defines the trigger event to load the script.
+   * @default ['mouseenter', 'mouseover', 'mousedown']
    */
   trigger?: ElementScriptTrigger
   /**
@@ -46,19 +33,21 @@ const props = withDefaults(defineProps<{
    */
   region?: string
   /**
-   * Defines the language of the map
+   * Defines the language of the map.
    */
   language?: string
   /**
-   * Defines the version of google maps js API
+   * Defines the version of google maps js API.
    */
   version?: string
   /**
    * Defines the width of the map.
+   * @default 640
    */
   width?: number | string
   /**
-   * Defines the height of the map
+   * Defines the height of the map.
+   * @default 400
    */
   height?: number | string
   /**
@@ -73,57 +62,112 @@ const props = withDefaults(defineProps<{
   mapIds?: { light?: string, dark?: string }
   /**
    * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
-   * Accepts 'light', 'dark', or a reactive ref.
+   * Accepts 'light' or 'dark'.
    */
   colorMode?: 'light' | 'dark'
-}>(), {
-  // @ts-expect-error untyped
-  trigger: ['mouseenter', 'mouseover', 'mousedown'],
-  width: 640,
-  height: 400,
-})
+}
+
+export interface ScriptGoogleMapsExpose {
+  /**
+   * A reference to the loaded Google Maps API, or `undefined` if not yet loaded.
+   */
+  googleMaps: ShallowRef<typeof google.maps | undefined>
+  /**
+   * A reference to the Google Map instance, or `undefined` if not yet initialized.
+   */
+  map: ShallowRef<google.maps.Map | undefined>
+  /**
+   * Utility function to resolve a location query (e.g. "New York, NY") to latitude/longitude coordinates.
+   * Uses a caching mechanism and a server-side proxy to avoid unnecessary client-side API calls.
+   */
+  resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>
+  /**
+   * Utility function to dynamically import additional Google Maps libraries (e.g. "marker", "places").
+   * Caches imported libraries for efficient reuse.
+   */
+  importLibrary: {
+    (key: 'marker'): Promise<google.maps.MarkerLibrary>
+    (key: 'places'): Promise<google.maps.PlacesLibrary>
+    (key: 'geometry'): Promise<google.maps.GeometryLibrary>
+    (key: 'drawing'): Promise<google.maps.DrawingLibrary>
+    (key: 'visualization'): Promise<google.maps.VisualizationLibrary>
+    (key: string): Promise<any>
+  }
+}
 
-const emits = defineEmits<{
+export interface ScriptGoogleMapsEmits {
   /**
    * Fired when the Google Maps instance is fully loaded and ready to use. Provides access to the maps API.
    */
-  ready: [e: typeof googleMaps]
+  ready: [payload: ScriptGoogleMapsExpose]
   /**
    * Fired when the Google Maps script fails to load.
    */
   error: []
-}>()
+}
 
-defineSlots<{
+export interface ScriptGoogleMapsSlots {
+  /**
+   * Default slot for rendering child components (e.g. markers, info windows) that depend on the map being ready.
+   */
   default?: () => any
-  placeholder?: () => any
+  /**
+   * Slot displayed while the map is loading. Can be used to show a custom loading indicator.
+   */
   loading?: () => any
+  /**
+   * Slot displayed when the script is awaiting user interaction to load (based on the `trigger` prop).
+   */
   awaitingLoad?: () => any
+  /**
+   * Slot displayed if the script fails to load.
+   */
   error?: () => any
-}>()
+  /**
+   * Slot displayed as a placeholder before the map is ready. Useful for showing a static map or skeleton.
+   */
+  placeholder?: () => any
+}
+</script>
+
+<script lang="ts" setup>
+import { useScriptTriggerElement } from '#nuxt-scripts/composables/useScriptTriggerElement'
+import { useScriptGoogleMaps } from '#nuxt-scripts/registry/google-maps'
+import { scriptRuntimeConfig, scriptsPrefix } from '#nuxt-scripts/utils'
+import { defu } from 'defu'
+import { tryUseNuxtApp, useHead, useRuntimeConfig } from 'nuxt/app'
+import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, useAttrs, useTemplateRef, watch } from 'vue'
+import ScriptAriaLoadingIndicator from '../ScriptAriaLoadingIndicator.vue'
+import { MAP_INJECTION_KEY } from './useGoogleMapsResource'
+
+const props = withDefaults(defineProps<ScriptGoogleMapsProps>(), {
+  // @ts-expect-error untyped
+  trigger: ['mouseenter', 'mouseover', 'mousedown'],
+  width: 640,
+  height: 400,
+})
+const emits = defineEmits<ScriptGoogleMapsEmits>()
+defineSlots<ScriptGoogleMapsSlots>()
+const DIGITS_ONLY_RE = /^\d+$/
+const DIGITS_PX_RE = /^\d+px$/i
 
 const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
 const runtimeConfig = useRuntimeConfig()
 
-// Color mode support - try to auto-detect from @nuxtjs/color-mode
-const nuxtApp = tryUseNuxtApp()
-const nuxtColorMode = nuxtApp?.$colorMode as { value: string } | undefined
-
-const currentColorMode = computed(() => {
-  if (props.colorMode)
-    return props.colorMode
-  if (nuxtColorMode?.value)
-    return nuxtColorMode.value === 'dark' ? 'dark' : 'light'
-  return 'light'
+const nuxtColorMode = computed(() => {
+  const value = (tryUseNuxtApp()?.$colorMode as { value: string } | undefined)?.value
+  return value === 'dark' || value === 'light' ? value : undefined
 })
 
+const currentColorMode = computed(() => props.colorMode || nuxtColorMode.value || 'light')
+
 const currentMapId = computed(() => {
   if (!props.mapIds)
     return props.mapOptions?.mapId
   return props.mapIds[currentColorMode.value] || props.mapIds.light || props.mapOptions?.mapId
 })
 
-const mapsApi = ref<typeof google.maps | undefined>()
+const mapsApi = shallowRef<typeof google.maps | undefined>()
 
 if (import.meta.dev) {
   if (!apiKey)
@@ -142,8 +186,8 @@ if (import.meta.dev) {
   }
 }
 
-const rootEl = ref<HTMLElement>()
-const mapEl = ref<HTMLElement>()
+const rootEl = useTemplateRef<HTMLElement>('rootEl')
+const mapEl = useTemplateRef<HTMLElement>('mapEl')
 
 const centerOverride = ref()
 
@@ -165,7 +209,7 @@ const options = computed(() => {
     zoom: 15,
   })
 })
-const ready = ref(false)
+const isMapReady = ref(false)
 
 const map: ShallowRef<google.maps.Map | undefined> = shallowRef()
 
@@ -198,31 +242,37 @@ async function resolveQueryToLatLng(query: string) {
   }
 
   // Fallback: use Places API client-side
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise<google.maps.LatLng>(async (resolve, reject) => {
-    if (!mapsApi.value) {
-      await load()
-      // await new promise, watch until mapsApi is set
-      await new Promise<void>((resolve) => {
-        const _ = watch(mapsApi, () => {
-          _()
-          resolve()
-        })
+  if (!mapsApi.value) {
+    await load()
+    // await new promise, watch until mapsApi is set
+    await new Promise<void>((resolve) => {
+      const _ = watch(mapsApi, () => {
+        _()
+        resolve()
       })
-    }
-    const placesService = new mapsApi.value!.places.PlacesService(map.value!)
-    placesService.findPlaceFromQuery({
-      query,
-      fields: ['name', 'geometry'],
-    }, (results, status) => {
-      if (status === 'OK' && results?.[0]?.geometry?.location)
-        return resolve(results[0].geometry.location)
-      return reject(new Error(`No location found for ${query}`))
     })
-  }).then((res) => {
-    queryToLatLngCache.set(query, res)
-    return res
+  }
+
+  const placesService = new mapsApi.value!.places.PlacesService(map.value!)
+  const result = await new Promise<google.maps.LatLng>((resolve, reject) => {
+    placesService.findPlaceFromQuery(
+      {
+        query,
+        fields: ['name', 'geometry'],
+      },
+      (results, status) => {
+        if (status === 'OK' && results?.[0]?.geometry?.location) {
+          resolve(results[0].geometry.location)
+        }
+        else {
+          reject(new Error(`No location found for ${query}`))
+        }
+      },
+    )
   })
+
+  queryToLatLngCache.set(query, result)
+  return result
 }
 
 const libraries = new Map<string, any>()
@@ -254,14 +304,14 @@ function importLibrary<T>(key: string): Promise<T> {
   return cached as Promise<T>
 }
 
-const googleMaps = {
+const googleMaps: ScriptGoogleMapsExpose = {
   googleMaps: mapsApi,
   map,
   resolveQueryToLatLng,
   importLibrary,
-} as const
+}
 
-defineExpose(googleMaps)
+defineExpose<ScriptGoogleMapsExpose>(googleMaps)
 
 // Shared InfoWindow group: only one InfoWindow open at a time within this map
 let activeInfoWindow: google.maps.InfoWindow | undefined
@@ -277,7 +327,7 @@ provide(MAP_INJECTION_KEY, {
 })
 
 onMounted(() => {
-  watch(ready, (v) => {
+  watch(isMapReady, (v) => {
     if (v) {
       emits('ready', googleMaps)
     }
@@ -299,13 +349,13 @@ onMounted(() => {
     if (map.value && zoom != null)
       map.value.setZoom(zoom)
   })
-  watch([() => options.value.center, ready, map], async (next) => {
+  watch([() => options.value.center, isMapReady, map], async (next) => {
     if (!map.value) {
       return
     }
     let center = toRaw(next[0])
     if (center) {
-      if (isLocationQuery(center) && ready.value) {
+      if (isLocationQuery(center) && isMapReady.value) {
         center = await resolveQueryToLatLng(center as string)
       }
       // Skip setCenter if the map is already at the same position to avoid
@@ -334,9 +384,10 @@ onMounted(() => {
     map.value = new mapsApi.value!.Map(mapEl.value!, _options)
     if (center && isLocationQuery(center)) {
       centerOverride.value = await resolveQueryToLatLng(center)
-      map.value?.setCenter(centerOverride.value)
+      if (centerOverride.value)
+        map.value?.setCenter(centerOverride.value)
     }
-    ready.value = true
+    isMapReady.value = true
   })
 })
 
@@ -404,9 +455,9 @@ onBeforeUnmount(() => {
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
-    <div v-show="ready" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
-    <slot v-if="!ready" name="placeholder" />
-    <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
+    <div v-show="isMapReady" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
+    <slot v-if="!isMapReady" name="placeholder" />
+    <slot v-if="status !== 'awaitingLoad' && !isMapReady" name="loading">
       <ScriptAriaLoadingIndicator />
     </slot>
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index ff96595b..6ab11e8c 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -1,20 +1,14 @@
-<script setup lang="ts">
-import { computed, inject, ref, useTemplateRef, watch } from 'vue'
-import { MARKER_CLUSTERER_INJECTION_KEY } from './types'
-import { MARKER_INJECTION_KEY, useGoogleMapsResource } from './useGoogleMapsResource'
+<script lang="ts">
+import type { ShallowRef } from 'vue'
 
-type OverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right'
+export type ScriptGoogleMapsOverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right'
   | 'bottom-left' | 'bottom-center' | 'bottom-right'
   | 'left-center' | 'right-center'
 
-type OverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer'
+export type ScriptGoogleMapsOverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer'
   | 'overlayMouseTarget' | 'floatPane'
 
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<{
+export interface ScriptGoogleMapsOverlayViewProps {
   /**
    * Geographic position for the overlay. Falls back to parent marker position if omitted.
    * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView
@@ -24,7 +18,7 @@ const props = withDefaults(defineProps<{
    * Anchor point of the overlay relative to its position.
    * @default 'bottom-center'
    */
-  anchor?: OverlayAnchor
+  anchor?: ScriptGoogleMapsOverlayAnchor
   /**
    * Pixel offset from the anchor position.
    */
@@ -34,7 +28,7 @@ const props = withDefaults(defineProps<{
    * @default 'floatPane'
    * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes
    */
-  pane?: OverlayPane
+  pane?: ScriptGoogleMapsOverlayPane
   /**
    * CSS z-index for the overlay element.
    */
@@ -56,7 +50,35 @@ const props = withDefaults(defineProps<{
    * @default true
    */
   hideWhenClustered?: boolean
-}>(), {
+}
+
+export interface ScriptGoogleMapsOverlayViewEmits {
+  /** Event handler called when the open state of the overlay view changes. */
+  'update:open': [value: boolean]
+}
+
+export interface ScriptGoogleMapsOverlayViewSlots {
+  default?: () => any
+}
+
+export interface ScriptGoogleMapsOverlayViewExpose {
+  /** The underlying `OverlayView` instance. */
+  overlay: ShallowRef<google.maps.OverlayView | undefined>
+  /** The current data-state of the overlay, either 'open' or 'closed'. */
+  dataState: Readonly<ShallowRef<'open' | 'closed'>>
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject, ref, useTemplateRef, watch } from 'vue'
+import { MARKER_CLUSTERER_INJECTION_KEY } from './types'
+import { MARKER_INJECTION_KEY, useGoogleMapsResource } from './useGoogleMapsResource'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScriptGoogleMapsOverlayViewProps>(), {
   anchor: 'bottom-center',
   pane: 'floatPane',
   blockMapInteraction: true,
@@ -64,9 +86,9 @@ const props = withDefaults(defineProps<{
   hideWhenClustered: true,
 })
 
-defineSlots<{
-  default?: () => any
-}>()
+defineEmits<ScriptGoogleMapsOverlayViewEmits>()
+
+defineSlots<ScriptGoogleMapsOverlayViewSlots>()
 
 const open = defineModel<boolean>('open', { default: undefined })
 
@@ -80,18 +102,17 @@ function getResolvedPosition(): google.maps.LatLngLiteral | undefined {
   if (props.position)
     return props.position
   if (markerContext?.advancedMarkerElement.value) {
-    const pos = markerContext.advancedMarkerElement.value.position
-    if (pos) {
-      // position can be LatLng or LatLngLiteral
-      if ('lat' in pos && typeof pos.lat === 'function')
-        return { lat: (pos as google.maps.LatLng).lat(), lng: (pos as google.maps.LatLng).lng() }
-      return pos as google.maps.LatLngLiteral
+    const markerPosition = markerContext.advancedMarkerElement.value.position
+    if (markerPosition) {
+      return markerPosition instanceof google.maps.LatLng
+        ? { lat: markerPosition.lat(), lng: markerPosition.lng() }
+        : { lat: markerPosition.lat, lng: markerPosition.lng }
     }
   }
   return undefined
 }
 
-const ANCHOR_TRANSFORMS: Record<OverlayAnchor, string> = {
+const ANCHOR_TRANSFORMS: Record<ScriptGoogleMapsOverlayAnchor, string> = {
   'center': 'translate(-50%, -50%)',
   'top-left': 'translate(0, 0)',
   'top-center': 'translate(-50%, 0)',
@@ -249,12 +270,12 @@ const overlay = useGoogleMapsResource<google.maps.OverlayView>({
 if (markerContext) {
   watch(
     () => {
-      const pos = markerContext.advancedMarkerElement.value?.position
-      if (!pos)
+      const markerPosition = markerContext.advancedMarkerElement.value?.position
+      if (!markerPosition)
         return undefined
-      if ('lat' in pos && typeof pos.lat === 'function')
-        return { lat: (pos as google.maps.LatLng).lat(), lng: (pos as google.maps.LatLng).lng() }
-      return pos as google.maps.LatLngLiteral
+      return markerPosition instanceof google.maps.LatLng
+        ? { lat: markerPosition.lat(), lng: markerPosition.lng() }
+        : { lat: markerPosition.lat, lng: markerPosition.lng }
     },
     () => { overlay.value?.draw() },
   )
@@ -306,7 +327,7 @@ if (markerClustererContext && markerContext) {
   )
 }
 
-defineExpose({ overlay, dataState })
+defineExpose<ScriptGoogleMapsOverlayViewExpose>({ overlay, dataState })
 </script>
 
 <template>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 416dd71d..dcfa1b1f 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -187,12 +187,6 @@ const content = registryScripts
       logo: registryScripts.find(s => s.label === 'Google Maps')?.logo,
       registryScript: null,
     },
-    {
-      name: 'Google Maps (Styled)',
-      path: '/third-parties/google-maps/styled',
-      logo: registryScripts.find(s => s.label === 'Google Maps')?.logo,
-      registryScript: null,
-    },
     {
       name: 'Google Maps (SFCs)',
       path: '/third-parties/google-maps/sfcs',
diff --git a/playground/pages/third-parties/google-maps/styled.vue b/playground/pages/third-parties/google-maps/styled.vue
deleted file mode 100644
index 0c562215..00000000
--- a/playground/pages/third-parties/google-maps/styled.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const mapOptions = {
-  center: { lat: -34.397, lng: 150.644 },
-  styles: [{ elementType: 'labels', stylers: [{ visibility: 'off' }, { color: '#f49f53' }] }, { featureType: 'landscape', stylers: [{ color: '#f9ddc5' }, { lightness: -7 }] }, { featureType: 'road', stylers: [{ color: '#813033' }, { lightness: 43 }] }, { featureType: 'poi.business', stylers: [{ color: '#645c20' }, { lightness: 38 }] }, { featureType: 'water', stylers: [{ color: '#1994bf' }, { saturation: -69 }, { gamma: 0.99 }, { lightness: 43 }] }, { featureType: 'road.local', elementType: 'geometry.fill', stylers: [{ color: '#f19f53' }, { weight: 1.3 }, { visibility: 'on' }, { lightness: 16 }] }, { featureType: 'poi.business' }, { featureType: 'poi.park', stylers: [{ color: '#645c20' }, { lightness: 39 }] }, { featureType: 'poi.school', stylers: [{ color: '#a95521' }, { lightness: 35 }] }, {}, { featureType: 'poi.medical', elementType: 'geometry.fill', stylers: [{ color: '#813033' }, { lightness: 38 }, { visibility: 'off' }] }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, { elementType: 'labels' }, { featureType: 'poi.sports_complex', stylers: [{ color: '#9e5916' }, { lightness: 32 }] }, {}, { featureType: 'poi.government', stylers: [{ color: '#9e5916' }, { lightness: 46 }] }, { featureType: 'transit.station', stylers: [{ visibility: 'off' }] }, { featureType: 'transit.line', stylers: [{ color: '#813033' }, { lightness: 22 }] }, { featureType: 'transit', stylers: [{ lightness: 38 }] }, { featureType: 'road.local', elementType: 'geometry.stroke', stylers: [{ color: '#f19f53' }, { lightness: -10 }] }, {}, {}, {}],
-} satisfies google.maps.MapOptions
-</script>
-
-<template>
-  <div>
-    <div>
-      <ScriptGoogleMaps
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
-        :width="1200"
-        :height="600"
-        :map-options="mapOptions"
-      />
-    </div>
-  </div>
-</template>