From 48892da7bbaa5e745a62e8cbf0ecbf3cb55669a9 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 10:40:29 +0200
Subject: [PATCH 1/9] refactor(google-maps): overhaul `<ScriptGoogleMaps>` and
 `<ScriptGoogleMapsOverlayView>`

---
 .../GoogleMaps/ScriptGoogleMaps.vue           | 408 ++++++++++--------
 .../ScriptGoogleMapsOverlayView.vue           | 407 +++++++++--------
 playground/pages/index.vue                    |   6 -
 .../third-parties/google-maps/center.vue      |   1 +
 .../third-parties/google-maps/emit-test.vue   |   5 +-
 .../google-maps/geojson-test.vue              |   3 +-
 .../third-parties/google-maps/markers.vue     |   3 -
 .../pages/third-parties/google-maps/null.vue  |   5 +-
 .../google-maps/nuxt-scripts.vue              |   8 +-
 .../google-maps/overlay-animated.vue          |  74 +---
 .../google-maps/overlay-popup.vue             |  21 +-
 .../pages/third-parties/google-maps/query.vue |  35 +-
 .../pages/third-parties/google-maps/sfcs.vue  |  32 +-
 .../third-parties/google-maps/styled.vue      |  19 -
 14 files changed, 552 insertions(+), 475 deletions(-)
 delete mode 100644 playground/pages/third-parties/google-maps/styled.vue

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
index 5ae811fb5..13664c793 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
@@ -1,129 +1,165 @@
 <script lang="ts">
 /// <reference types="google.maps" />
 import type { ElementScriptTrigger } from '#nuxt-scripts/types'
-import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue'
+import type { HTMLAttributes, ReservedProps, ShallowRef, WatchHandle } 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 { whenever } from '@vueuse/shared'
 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 { computed, onBeforeUnmount, onMounted, provide, shallowRef, 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.
-   */
+     * Defines the trigger event to load the script.
+     * @default ['mouseenter', 'mouseover', 'mousedown']
+     */
   trigger?: ElementScriptTrigger
   /**
-   * Defines the Google Maps API key. Must have access to the Static Maps API as well.
-   */
+     * Defines the Google Maps API key. Must have access to the Static Maps API as well.
+     */
   apiKey?: string
   /**
-   * A latitude / longitude of where to focus the map.
-   */
-  center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`
-  /**
-   * Zoom level for the map (0-21). Reactive: changing this will update the map.
-   * Takes precedence over mapOptions.zoom when provided.
-   */
-  zoom?: number
-  /**
-   * Options for the map.
-   */
+     * Options for the map.
+     */
   mapOptions?: google.maps.MapOptions
   /**
-   * Defines the region of the map.
-   */
+     * Defines the region of the map.
+     */
   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.
-   */
+     * 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
   /**
-   * Customize the root element attributes.
-   */
+     * Customize the root element attributes.
+     */
   rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>
   /**
-   * Map IDs for light and dark color modes.
-   * When provided, the map will automatically switch styles based on color mode.
-   * Requires @nuxtjs/color-mode or manual colorMode prop.
-   */
+     * Map IDs for light and dark color modes.
+     * When provided, the map will automatically switch styles based on color mode.
+     * Requires @nuxtjs/color-mode or manual colorMode prop.
+     */
   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.
-   */
+     * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
+     * 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.
+     */
+  mapsApi: 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]
+     * Fired when the Google Maps instance is fully loaded and ready to use. Provides access to the maps API.
+     */
+  ready: [payload: ScriptGoogleMapsExpose]
   /**
-   * Fired when the Google Maps script fails to load.
-   */
+     * 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>
+const props = withDefaults(defineProps<ScriptGoogleMapsProps>(), {
+  trigger: () => ['mouseenter', 'mouseover', 'mousedown'],
+  width: 640,
+  height: 400,
+})
+
+const emit = defineEmits<ScriptGoogleMapsEmits>()
+
+defineSlots<ScriptGoogleMapsSlots>()
 
 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 nuxtColorMode = computed(() => {
+  const value = (tryUseNuxtApp()?.$colorMode as { value: string } | undefined)?.value
 
-const currentColorMode = computed(() => {
-  if (props.colorMode)
-    return props.colorMode
-  if (nuxtColorMode?.value)
-    return nuxtColorMode.value === 'dark' ? 'dark' : 'light'
-  return 'light'
+  return value === 'dark' || value === 'light' ? value : undefined
 })
 
-const currentMapId = computed(() => {
-  if (!props.mapIds)
-    return props.mapOptions?.mapId
-  return props.mapIds[currentColorMode.value] || props.mapIds.light || props.mapOptions?.mapId
-})
+const _colorMode = computed(() => props.colorMode || nuxtColorMode.value || 'light')
 
-const mapsApi = ref<typeof google.maps | undefined>()
+const _mapId = computed(() => props.mapIds?.[_colorMode.value] || props.mapOptions?.mapId || 'map')
+
+const mapsApi = shallowRef<typeof google.maps>()
 
 if (import.meta.dev) {
   if (!apiKey)
@@ -142,12 +178,11 @@ if (import.meta.dev) {
   }
 }
 
-const rootEl = ref<HTMLElement>()
-const mapEl = ref<HTMLElement>()
-
-const centerOverride = ref()
+const rootEl = useTemplateRef('rootEl')
+const mapEl = useTemplateRef('mapEl')
 
 const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+
 const { load, status, onLoaded } = useScriptGoogleMaps({
   apiKey: props.apiKey,
   scriptOptions: {
@@ -158,71 +193,89 @@ const { load, status, onLoaded } = useScriptGoogleMaps({
   v: props.version,
 })
 
-const options = computed(() => {
-  const mapId = props.mapOptions?.styles ? undefined : (currentMapId.value || 'map')
-  return defu({ center: centerOverride.value, mapId, zoom: props.zoom }, props.mapOptions, {
-    center: props.center,
-    zoom: 15,
-  })
+const mapOptions = computed<google.maps.MapOptions>(() => {
+  return defu(
+    { mapId: _mapId.value },
+    props.mapOptions,
+    { zoom: 15 },
+  )
 })
-const ready = ref(false)
 
-const map: ShallowRef<google.maps.Map | undefined> = shallowRef()
+const isMapReady = shallowRef(false)
 
-function isLocationQuery(s: string | any) {
-  return typeof s === 'string' && (s.split(',').length > 2 || s.includes('+'))
-}
+const map = shallowRef<google.maps.Map>()
 
 const queryToLatLngCache = new Map<string, google.maps.LatLng | google.maps.LatLngLiteral>()
 
-async function resolveQueryToLatLng(query: string) {
-  if (query && typeof query === 'object')
-    return Promise.resolve(query)
-  if (queryToLatLngCache.has(query)) {
-    return Promise.resolve(queryToLatLngCache.get(query))
+async function resolveQueryToLatLng(query: string): Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined> {
+  const cached = queryToLatLngCache.get(query)
+
+  if (cached) {
+    return cached instanceof google.maps.LatLng
+      ? {
+          lat: cached.lat(),
+          lng: cached.lng(),
+        }
+      : {
+          lat: cached.lat,
+          lng: cached.lng,
+        }
   }
 
-  // Use geocode proxy if available (avoids loading Places library client-side)
+  // Use geocode proxy if available (recommended)
   const endpoints = (runtimeConfig.public['nuxt-scripts'] as any)?.endpoints
   if (endpoints?.googleMaps) {
-    const data = await $fetch<{ results: Array<{ geometry: { location: { lat: number, lng: number } } }>, status: string }>(`${scriptsPrefix()}/proxy/google-maps-geocode`, {
+    const data = await $fetch<{
+      results: Array<{ geometry: { location: { lat: number, lng: number } } }>
+      status: string
+    }>(`${scriptsPrefix()}/proxy/google-maps-geocode`, {
       params: { address: query },
     })
+
     if (data.status === 'OK' && data.results?.[0]?.geometry?.location) {
       const loc = data.results[0].geometry.location
       const latLng = { lat: loc.lat, lng: loc.lng }
       queryToLatLngCache.set(query, latLng)
       return latLng
     }
+
     throw new Error(`No location found for ${query}`)
   }
 
-  // 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()
-        })
+  // Fallback: client-side Places API
+  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>()
@@ -234,8 +287,10 @@ function importLibrary(key: 'drawing'): Promise<google.maps.DrawingLibrary>
 function importLibrary(key: 'visualization'): Promise<google.maps.VisualizationLibrary>
 function importLibrary(key: string): Promise<any>
 function importLibrary<T>(key: string): Promise<T> {
-  if (libraries.has(key))
+  if (libraries.has(key)) {
     return libraries.get(key)
+  }
+
   const p = mapsApi.value?.importLibrary(key) || new Promise((resolve) => {
     const stop = watch(mapsApi, (api) => {
       if (api) {
@@ -245,26 +300,28 @@ function importLibrary<T>(key: string): Promise<T> {
       }
     }, { immediate: true })
   })
+
   // Clear cache on failure to allow retry
   const cached = Promise.resolve(p).catch((err) => {
     libraries.delete(key)
     throw err
   })
+
   libraries.set(key, cached)
+
   return cached as Promise<T>
 }
 
-const googleMaps = {
-  googleMaps: mapsApi,
+defineExpose<ScriptGoogleMapsExpose>({
+  mapsApi,
   map,
   resolveQueryToLatLng,
   importLibrary,
-} as const
-
-defineExpose(googleMaps)
+})
 
 // Shared InfoWindow group: only one InfoWindow open at a time within this map
 let activeInfoWindow: google.maps.InfoWindow | undefined
+
 provide(MAP_INJECTION_KEY, {
   map,
   mapsApi,
@@ -276,67 +333,62 @@ provide(MAP_INJECTION_KEY, {
   },
 })
 
+let mapElWatchHandle: WatchHandle
+
 onMounted(() => {
-  watch(ready, (v) => {
-    if (v) {
-      emits('ready', googleMaps)
-    }
-  })
-  watch(status, (v) => {
-    if (v === 'error') {
-      emits('error')
-    }
-  })
-  watch(options, () => {
+  whenever(
+    isMapReady,
+    () => emit('ready', {
+      mapsApi,
+      map,
+      resolveQueryToLatLng,
+      importLibrary,
+    }),
+  )
+
+  whenever(
+    () => status.value === 'error',
+    () => emit('error'),
+  )
+
+  watch(mapOptions, (mapOptions) => {
     if (!map.value)
       return
-    // Exclude center and zoom — they have dedicated watchers that avoid
-    // resetting user interactions (pan/zoom) on unrelated re-renders.
-    const { center: _, zoom: __, ...rest } = options.value
+
+    const { center: _, zoom: __, ...rest } = mapOptions
+
     map.value.setOptions(rest)
   })
-  watch(() => options.value.zoom, (zoom) => {
-    if (map.value && zoom != null)
-      map.value.setZoom(zoom)
-  })
-  watch([() => options.value.center, ready, map], async (next) => {
-    if (!map.value) {
+
+  watch(() => mapOptions.value.zoom, (zoom) => {
+    if (!map.value || typeof zoom !== 'number') {
       return
     }
-    let center = toRaw(next[0])
-    if (center) {
-      if (isLocationQuery(center) && ready.value) {
-        center = await resolveQueryToLatLng(center as string)
-      }
-      // Skip setCenter if the map is already at the same position to avoid
-      // resetting user pan interactions on unrelated re-renders.
-      const current = map.value!.getCenter()
-      if (current) {
-        const newLat = typeof (center as any).lat === 'function' ? (center as any).lat() : (center as any).lat
-        const newLng = typeof (center as any).lng === 'function' ? (center as any).lng() : (center as any).lng
-        if (current.lat() === newLat && current.lng() === newLng)
-          return
-      }
-      map.value!.setCenter(center as google.maps.LatLng)
+
+    map.value.setZoom(zoom)
+  })
+
+  watch(() => mapOptions.value.center, async (center) => {
+    if (!map.value || !center) {
+      return
     }
+
+    map.value.panTo(center)
   }, {
     immediate: true,
   })
-  onLoaded(async (instance: any) => {
-    mapsApi.value = await instance.maps
-    // may need to transform the center before we can init the map
-    const center = options.value.center as string
-    const _options: google.maps.MapOptions = {
-      ...options.value,
-      // @ts-expect-error broken
-      center: !center || isLocationQuery(center) ? undefined : center,
-    }
-    map.value = new mapsApi.value!.Map(mapEl.value!, _options)
-    if (center && isLocationQuery(center)) {
-      centerOverride.value = await resolveQueryToLatLng(center)
-      map.value?.setCenter(centerOverride.value)
-    }
-    ready.value = true
+
+  onLoaded((instance) => {
+    mapElWatchHandle = whenever(mapEl, async (mapEl) => {
+      mapsApi.value = await instance.maps
+
+      map.value = new mapsApi.value.Map(mapEl, mapOptions.value)
+
+      isMapReady.value = true
+    }, {
+      immediate: true,
+      once: true,
+    })
   })
 })
 
@@ -399,18 +451,24 @@ onBeforeUnmount(() => {
   mapEl.value?.firstChild?.remove()
   libraries.clear()
   queryToLatLngCache.clear()
+  mapElWatchHandle?.()
 })
 </script>
 
 <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" />
+
     <slot v-else-if="status === 'error'" name="error" />
+
     <slot />
   </div>
 </template>
diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index ff96595b9..a3dcf0d0b 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -1,62 +1,89 @@
 <script setup lang="ts">
-import { computed, inject, ref, useTemplateRef, watch } from 'vue'
+import type { ShallowRef, WatchHandle } from 'vue'
+import { useVModel, whenever } from '@vueuse/core'
+import { computed, inject, useTemplateRef, watch } from 'vue'
 import { MARKER_CLUSTERER_INJECTION_KEY } from './types'
 import { MARKER_INJECTION_KEY, useGoogleMapsResource } from './useGoogleMapsResource'
 
-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 {
+  /**
+     * The open state of the overlay view when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+  defaultOpen?: boolean
   /**
-   * 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
-   */
-  position?: google.maps.LatLngLiteral
+     * The controlled open state of the overlay view. Can be binded with `v-model`.
+     */
+  open?: boolean
   /**
-   * Anchor point of the overlay relative to its position.
-   * @default 'bottom-center'
-   */
-  anchor?: OverlayAnchor
+     * 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
+     */
+  position?: google.maps.LatLng | google.maps.LatLngLiteral
   /**
-   * Pixel offset from the anchor position.
-   */
+     * Anchor point of the overlay relative to its position.
+     * @default 'bottom-center'
+     */
+  anchor?: ScriptGoogleMapsOverlayAnchor
+  /**
+     * Pixel offset from the anchor position.
+     */
   offset?: { x: number, y: number }
   /**
-   * The map pane on which to render the overlay.
-   * @default 'floatPane'
-   * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes
-   */
-  pane?: OverlayPane
+     * The map pane on which to render the overlay.
+     * @default 'floatPane'
+     * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#MapPanes
+     */
+  pane?: ScriptGoogleMapsOverlayPane
   /**
-   * CSS z-index for the overlay element.
-   */
+     * CSS z-index for the overlay element.
+     */
   zIndex?: number
   /**
-   * Whether to block map click and gesture events from passing through the overlay.
-   * @default true
-   */
+     * Whether to block map click and gesture events from passing through the overlay.
+     * @default true
+     */
   blockMapInteraction?: boolean
   /**
-   * Pan the map so the overlay is fully visible when opened, similar to InfoWindow behavior.
-   * Set to `true` for default 40px padding, or a number for custom padding.
-   * @default true
-   */
+     * Pan the map so the overlay is fully visible when opened, similar to InfoWindow behavior.
+     * Set to `true` for default 40px padding, or a number for custom padding.
+     * @default true
+     */
   panOnOpen?: boolean | number
   /**
-   * Automatically hide the overlay when its parent marker joins a cluster (on zoom out).
-   * Only applies when nested inside a ScriptGoogleMapsMarkerClusterer.
-   * @default true
-   */
+     * Automatically hide the overlay when its parent marker joins a cluster (on zoom out).
+     * Only applies when nested inside a ScriptGoogleMapsMarkerClusterer.
+     * @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 ScriptGoogleMapsOverlayViewExpose {
+  /** The underlying `OverlayView` instance extending `google.maps.OverlayView`. */
+  overlayView: ShallowRef<OverlayView | undefined>
+  /** The current data-state of the overlay, either 'open' or 'closed'. */
+  dataState: ShallowRef<'open' | 'closed'>
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScriptGoogleMapsOverlayViewProps>(), {
+  open: undefined,
+  defaultOpen: true,
   anchor: 'bottom-center',
   pane: 'floatPane',
   blockMapInteraction: true,
@@ -64,11 +91,16 @@ const props = withDefaults(defineProps<{
   hideWhenClustered: true,
 })
 
+const emit = defineEmits<ScriptGoogleMapsOverlayViewEmits>()
+
 defineSlots<{
   default?: () => any
 }>()
 
-const open = defineModel<boolean>('open', { default: undefined })
+const open = useVModel(props, 'open', emit, {
+  defaultValue: props.defaultOpen,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
 
 const markerContext = inject(MARKER_INJECTION_KEY, undefined)
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined)
@@ -76,22 +108,31 @@ const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined)
 // Read position fresh each call — NOT a computed, because Google Maps object
 // internal state (marker.getPosition()) is invisible to Vue's reactivity.
 // A computed would cache stale coordinates after marker drag.
-function getResolvedPosition(): google.maps.LatLngLiteral | undefined {
-  if (props.position)
+function getResolvedPosition(): google.maps.LatLng | 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)',
@@ -103,144 +144,142 @@ const ANCHOR_TRANSFORMS: Record<OverlayAnchor, string> = {
   'right-center': 'translate(-100%, -50%)',
 }
 
+const overlayAnchor = useTemplateRef('overlay-anchor')
+
 const overlayContent = useTemplateRef('overlay-content')
 
-// Reactive open/closed state for CSS animations via data-state attribute.
-// Tracks whether the overlay content is positioned and should be visually open.
-const isPositioned = ref(false)
-const dataState = computed(() => isPositioned.value ? 'open' : 'closed')
+const dataState = computed(() => open.value ? 'open' : 'closed')
 
-// Track all event listeners for clean teardown
 const listeners: google.maps.MapsEventListener[] = []
 
-function setDataState(el: HTMLElement, state: 'open' | 'closed') {
-  el.dataset.state = state
-  // Propagate to the slot's root element imperatively (Vue template bindings
-  // don't reliably patch elements that have been moved to Google Maps panes)
-  const child = el.firstElementChild as HTMLElement | null
-  if (child)
-    child.dataset.state = state
-}
+const overlayPosition = shallowRef<google.maps.Point>()
 
-function hideElement(el: HTMLElement) {
-  el.style.visibility = 'hidden'
-  el.style.pointerEvents = 'none'
-  setDataState(el, 'closed')
-}
+class OverlayView extends google.maps.OverlayView {
+  private anchorEl: HTMLElement
+  private contentEl: HTMLElement
+  private mapsApi: typeof google.maps
+  private map: google.maps.Map
+  private panOnOpenWatchHandle: WatchHandle | undefined
 
-function panMapToFitOverlay(el: HTMLElement, map: google.maps.Map, padding: number) {
-  const child = el.firstElementChild
-  if (!child)
-    return
-  const overlayRect = child.getBoundingClientRect()
-  const mapRect = map.getDiv().getBoundingClientRect()
-  let panX = 0
-  let panY = 0
-  if (overlayRect.top - padding < mapRect.top)
-    panY = overlayRect.top - mapRect.top - padding
-  if (overlayRect.bottom + padding > mapRect.bottom)
-    panY = overlayRect.bottom - mapRect.bottom + padding
-  if (overlayRect.left - padding < mapRect.left)
-    panX = overlayRect.left - mapRect.left - padding
-  else if (overlayRect.right + padding > mapRect.right)
-    panX = overlayRect.right - mapRect.right + padding
-  if (panX !== 0 || panY !== 0)
-    map.panBy(panX, panY)
-}
+  constructor(anchorEl: HTMLElement, contentEl: HTMLElement, mapsApi: typeof google.maps, map: google.maps.Map) {
+    super()
 
-const overlay = useGoogleMapsResource<google.maps.OverlayView>({
-  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
-  ready: () => !!overlayContent.value
-    && !!(props.position || markerContext?.advancedMarkerElement.value),
-  create({ mapsApi, map }) {
-    const el = overlayContent.value!
-
-    class CustomOverlay extends mapsApi.OverlayView {
-      override onAdd() {
-        const panes = this.getPanes()
-        if (panes) {
-          panes[props.pane].appendChild(el)
-          if (props.blockMapInteraction)
-            mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el)
-        }
-        if (props.panOnOpen) {
-          // Wait for draw() to position the element, then pan
-          const padding = typeof props.panOnOpen === 'number' ? props.panOnOpen : 40
-          requestAnimationFrame(() => {
-            panMapToFitOverlay(el, map, padding)
-          })
-        }
-      }
+    this.anchorEl = anchorEl
+    this.contentEl = contentEl
+    this.mapsApi = mapsApi
+    this.map = map
+  }
 
-      override draw() {
-        // v-model:open support: hide when explicitly closed
-        if (open.value === false) {
-          isPositioned.value = false
-          hideElement(el)
-          return
-        }
-
-        const position = getResolvedPosition()
-        if (!position) {
-          isPositioned.value = false
-          hideElement(el)
-          return
-        }
-        const projection = this.getProjection()
-        if (!projection) {
-          isPositioned.value = false
-          hideElement(el)
-          return
-        }
-        const pos = projection.fromLatLngToDivPixel(
-          new mapsApi.LatLng(position.lat, position.lng),
-        )
-        if (!pos) {
-          isPositioned.value = false
-          hideElement(el)
-          return
-        }
-
-        el.style.position = 'absolute'
-        el.style.left = `${pos.x + (props.offset?.x ?? 0)}px`
-        el.style.top = `${pos.y + (props.offset?.y ?? 0)}px`
-        el.style.transform = ANCHOR_TRANSFORMS[props.anchor]
-        if (props.zIndex !== undefined)
-          el.style.zIndex = String(props.zIndex)
-        el.style.visibility = 'visible'
-        el.style.pointerEvents = 'auto'
-        setDataState(el, 'open')
-        isPositioned.value = true
-      }
+  override onAdd() {
+    const panes = this.getPanes()
+
+    if (panes) {
+      panes[props.pane].appendChild(this.anchorEl)
+    }
 
-      override onRemove() {
-        el.parentNode?.removeChild(el)
+    if (props.blockMapInteraction) {
+      this.mapsApi.OverlayView.preventMapHitsAndGesturesFrom(this.anchorEl)
+    }
+
+    if (props.panOnOpen) {
+      if (props.open) {
+        this.panOnOpenWatchHandle = whenever(() => props.open, () => {
+          requestAnimationFrame(() => this.panMapToFitOverlay())
+        }, {
+          immediate: true,
+        })
+      }
+      else {
+        requestAnimationFrame(() => this.panMapToFitOverlay())
       }
     }
+  }
 
-    // Prevent flash: hide until first draw() positions content
-    el.style.visibility = 'hidden'
-    el.style.pointerEvents = 'none'
+  override draw() {
+    const position = getResolvedPosition()
 
-    const ov = new CustomOverlay()
-    ov.setMap(map)
+    if (!position) {
+      return
+    }
+
+    const projection = this.getProjection()
+
+    const point = projection.fromLatLngToDivPixel(position)
+
+    if (!point) {
+      return
+    }
+
+    overlayPosition.value = new this.mapsApi.Point(
+      point.x + (props.offset?.x ?? 0),
+      point.y + (props.offset?.y ?? 0),
+    )
+  }
+
+  override onRemove() {
+    this.anchorEl.parentNode?.removeChild(this.anchorEl)
+
+    this.panOnOpenWatchHandle?.()
+  }
+
+  panMapToFitOverlay() {
+    const padding = typeof props.panOnOpen === 'number' ? props.panOnOpen : 40
+    const overlayContentRect = this.contentEl.getBoundingClientRect()
+    const mapRect = this.map.getDiv().getBoundingClientRect()
+
+    let panX = 0
+    let panY = 0
+
+    if (overlayContentRect.top - padding < mapRect.top) {
+      panY = overlayContentRect.top - mapRect.top - padding
+    }
+    else if (overlayContentRect.bottom + padding > mapRect.bottom) {
+      panY = overlayContentRect.bottom - mapRect.bottom + padding
+    }
+
+    if (overlayContentRect.left - padding < mapRect.left) {
+      panX = overlayContentRect.left - mapRect.left - padding
+    }
+    else if (overlayContentRect.right + padding > mapRect.right) {
+      panX = overlayContentRect.right - mapRect.right + padding
+    }
+
+    if (panX !== 0 || panY !== 0) {
+      this.map.panBy(panX, panY)
+    }
+  }
+}
+
+const overlayView = useGoogleMapsResource<OverlayView>({
+  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
+  ready: () => open.value && !!overlayAnchor.value && !!overlayContent.value
+    && !!(props.position || markerContext?.advancedMarkerElement.value),
+  create({ mapsApi, map }) {
+    const anchorEl = overlayAnchor.value!
+    const contentEl = overlayContent.value!
+
+    const overlayView = new OverlayView(anchorEl, contentEl, mapsApi, map)
+
+    overlayView.setMap(map)
 
     // Follow parent marker position changes
     if (markerContext?.advancedMarkerElement.value) {
       const ame = markerContext.advancedMarkerElement.value
+
       // AdvancedMarkerElement fires drag continuously during drag
       listeners.push(
-        ame.addListener('drag', () => ov.draw()),
-        ame.addListener('dragend', () => ov.draw()),
+        ame.addListener('drag', () => overlayView.draw()),
+        ame.addListener('dragend', () => overlayView.draw()),
       )
     }
 
-    return ov
+    return overlayView
   },
-  cleanup(ov) {
+  cleanup(overlayView) {
     listeners.forEach(l => l.remove())
     listeners.length = 0
-    ov.setMap(null)
+
+    overlayView.setMap(null)
   },
 })
 
@@ -249,14 +288,17 @@ 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() },
+    () => { overlayView.value?.draw() },
   )
 }
 
@@ -264,23 +306,16 @@ if (markerContext) {
 // Only watches explicit props — marker position changes are handled by event listeners above
 watch(
   () => [props.position?.lat, props.position?.lng, props.offset?.x, props.offset?.y, props.zIndex, props.anchor],
-  () => { overlay.value?.draw() },
+  () => { overlayView.value?.draw() },
 )
 
-// v-model:open — toggle visibility without remounting the overlay
-watch(() => open.value, () => {
-  if (!overlay.value)
-    return
-  overlay.value.draw()
-})
-
 // Pane or blockMapInteraction change requires remount (setMap cycles onRemove + onAdd + draw)
 watch([() => props.pane, () => props.blockMapInteraction], () => {
-  if (overlay.value) {
-    const map = overlay.value.getMap()
-    overlay.value.setMap(null)
+  if (overlayView.value) {
+    const map = overlayView.value.getMap()
+    overlayView.value.setMap(null)
     if (map)
-      overlay.value.setMap(map)
+      overlayView.value.setMap(map)
   }
 })
 
@@ -306,13 +341,25 @@ if (markerClustererContext && markerContext) {
   )
 }
 
-defineExpose({ overlay, dataState })
+defineExpose<ScriptGoogleMapsOverlayViewExpose>({ overlayView, dataState })
 </script>
 
 <template>
   <div style="display: none;">
-    <div ref="overlay-content" :data-state="dataState" v-bind="$attrs">
-      <slot />
+    <div
+      ref="overlay-anchor" :style="{
+        position: 'absolute',
+        left: `${overlayPosition?.x ?? 0 + (props.offset?.x ?? 0)}px`,
+        top: `${overlayPosition?.y ?? 0 + (props.offset?.y ?? 0)}px`,
+        transform: ANCHOR_TRANSFORMS[anchor],
+        zIndex,
+        visibility: open ? 'visible' : 'hidden',
+        pointerEvents: open ? 'auto' : 'none',
+      }"
+    >
+      <div ref="overlay-content" :data-state="dataState" v-bind="$attrs">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 416dd71d0..dcfa1b1f8 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/center.vue b/playground/pages/third-parties/google-maps/center.vue
index 9ab6131b9..540822b5f 100644
--- a/playground/pages/third-parties/google-maps/center.vue
+++ b/playground/pages/third-parties/google-maps/center.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue'
 const mapOptions = ref({
   center: { lat: -34.397, lng: 150.644 },
 })
+
 function changeQuery() {
   mapOptions.value = {
     center: {
diff --git a/playground/pages/third-parties/google-maps/emit-test.vue b/playground/pages/third-parties/google-maps/emit-test.vue
index 973a5b910..946a0210d 100644
--- a/playground/pages/third-parties/google-maps/emit-test.vue
+++ b/playground/pages/third-parties/google-maps/emit-test.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
-import { ref, useTemplateRef } from 'vue'
+import { ref } from 'vue'
 
 const eventLog = ref<string[]>([])
 
@@ -62,9 +61,9 @@ const circleOptions = {
         api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="800"
         :height="500"
-        :zoom="12"
         :map-options="{
           center: { lat: -33.87, lng: 151.21 },
+          zoom: 12,
           mapId: 'DEMO_MAP_ID',
         }"
       >
diff --git a/playground/pages/third-parties/google-maps/geojson-test.vue b/playground/pages/third-parties/google-maps/geojson-test.vue
index da73b8f1a..4d0c145f4 100644
--- a/playground/pages/third-parties/google-maps/geojson-test.vue
+++ b/playground/pages/third-parties/google-maps/geojson-test.vue
@@ -95,8 +95,7 @@ const secondGeoJson = {
         api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="800"
         :height="450"
-        :zoom="13"
-        :map-options="{ center: { lat: -33.875, lng: 151.22 } }"
+        :map-options="{ center: { lat: -33.875, lng: 151.22 }, zoom: 13 }"
       >
         <!-- Primary GeoJSON layer -->
         <ScriptGoogleMapsGeoJson
diff --git a/playground/pages/third-parties/google-maps/markers.vue b/playground/pages/third-parties/google-maps/markers.vue
index fe20447c7..8b2da80fd 100644
--- a/playground/pages/third-parties/google-maps/markers.vue
+++ b/playground/pages/third-parties/google-maps/markers.vue
@@ -7,8 +7,6 @@ const markers = ref([
   { lat: -34.397, lng: 150.642 },
 ])
 
-const googleMapsRef = ref()
-
 let increment = 1
 function addMarker() {
   const lat = (1000 * center.value.lat + increment) / 1000
@@ -27,7 +25,6 @@ function removeMarkers() {
   <div>
     <div>
       <ScriptGoogleMaps
-        ref="googleMapsRef"
         api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
diff --git a/playground/pages/third-parties/google-maps/null.vue b/playground/pages/third-parties/google-maps/null.vue
index 271fe06b5..e63239ad6 100644
--- a/playground/pages/third-parties/google-maps/null.vue
+++ b/playground/pages/third-parties/google-maps/null.vue
@@ -15,11 +15,12 @@ function changeQuery() {
   <div>
     <div>
       <ScriptGoogleMaps
-        ref="googleMapsRef"
         api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
-        :center="center"
+        :map-options="{
+            center
+        }"
       />
     </div>
     <div class="button-container">
diff --git a/playground/pages/third-parties/google-maps/nuxt-scripts.vue b/playground/pages/third-parties/google-maps/nuxt-scripts.vue
index 1ebd7436c..b76cb17ce 100644
--- a/playground/pages/third-parties/google-maps/nuxt-scripts.vue
+++ b/playground/pages/third-parties/google-maps/nuxt-scripts.vue
@@ -6,10 +6,12 @@ const mapOptions = ref({
   center: { lat: -34.397, lng: 150.644 },
 })
 
-const googleMapsRef = ref()
+const googleMapsRef = useTemplateRef('googleMapsRef')
 
-function changeQuery() {
-  query.value = 'Brooklyn+Bride,New+York+NY'
+async function changeQuery() {
+    const res = await googleMapsRef.value.resolveQueryToLatLng('Brooklyn+Bride,New+York+NY')
+
+  mapOptions.value.center = res
 }
 </script>
 
diff --git a/playground/pages/third-parties/google-maps/overlay-animated.vue b/playground/pages/third-parties/google-maps/overlay-animated.vue
index b9f1db219..c931cf9f7 100644
--- a/playground/pages/third-parties/google-maps/overlay-animated.vue
+++ b/playground/pages/third-parties/google-maps/overlay-animated.vue
@@ -32,11 +32,9 @@ function close(id: number) {
       Click a marker to open/close. Uses data-state attribute for CSS enter/leave animations.
     </p>
     <ScriptGoogleMaps
-      :center="{ lat: -33.8688, lng: 151.2093 }"
-      :zoom="12"
       :width="800"
       :height="500"
-      :map-options="{ mapId: 'DEMO_MAP_ID' }"
+      :map-options="{ mapId: 'DEMO_MAP_ID', center: { lat: -33.8688, lng: 151.2093 }, zoom: 12 }"
     >
       <ScriptGoogleMapsMarker
         v-for="place in places"
@@ -47,54 +45,37 @@ function close(id: number) {
         <ScriptGoogleMapsOverlayView
           :open="isOpen(place.id)"
           anchor="bottom-center"
+          class="bg-white rounded-lg p-4 w-64 shadow-lg data-[state=open]:animate-[overlayIn_200ms_ease-out]"
           :offset="{ x: 0, y: -50 }"
           @update:open="(v: boolean) => { if (!v) close(place.id) }"
         >
-            <div class="overlay-popup">
-              <div class="flex items-start justify-between gap-2">
-                <h3 class="text-sm font-semibold text-gray-900">
-                  {{ place.name }}
-                </h3>
-                <button
-                  class="shrink-0 rounded-full p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
-                  @click.stop="close(place.id)"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-                  </svg>
-                </button>
-              </div>
-              <div class="mt-1 flex items-center gap-1 text-xs text-gray-500">
-                <span class="font-medium text-yellow-500">★ {{ place.rating }}</span>
-                <span>({{ place.reviews }} reviews)</span>
-              </div>
-              <p class="mt-2 text-xs leading-relaxed text-gray-600">
-                {{ place.desc }}
-              </p>
+            <div class="flex items-start justify-between gap-2">
+            <h3 class="text-sm font-semibold text-gray-900">
+                {{ place.name }}
+            </h3>
+            <button
+                class="shrink-0 rounded-full p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+                @click.stop="close(place.id)"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </button>
             </div>
+            <div class="mt-1 flex items-center gap-1 text-xs text-gray-500">
+            <span class="font-medium text-yellow-500">★ {{ place.rating }}</span>
+            <span>({{ place.reviews }} reviews)</span>
+            </div>
+            <p class="mt-2 text-xs leading-relaxed text-gray-600">
+            {{ place.desc }}
+            </p>
         </ScriptGoogleMapsOverlayView>
       </ScriptGoogleMapsMarker>
     </ScriptGoogleMaps>
   </div>
 </template>
 
-<style scoped>
-.overlay-popup {
-  width: 16rem;
-  border-radius: 0.75rem;
-  background: white;
-  padding: 1rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.overlay-popup[data-state="open"] {
-  animation: overlayIn 200ms ease-out forwards;
-}
-
-.overlay-popup[data-state="closed"] {
-  animation: overlayOut 150ms ease-in forwards;
-}
-
+<style>
 @keyframes overlayIn {
   from {
     opacity: 0;
@@ -105,15 +86,4 @@ function close(id: number) {
     transform: scale(1) translateY(0);
   }
 }
-
-@keyframes overlayOut {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(4px);
-  }
-}
 </style>
diff --git a/playground/pages/third-parties/google-maps/overlay-popup.vue b/playground/pages/third-parties/google-maps/overlay-popup.vue
index 950548543..fad901bd0 100644
--- a/playground/pages/third-parties/google-maps/overlay-popup.vue
+++ b/playground/pages/third-parties/google-maps/overlay-popup.vue
@@ -19,11 +19,9 @@ const places = [
       Click a marker to show a fully custom popup. Click again or press × to close. Uses v-if for multiple markers.
     </p>
     <ScriptGoogleMaps
-      :center="{ lat: -33.8688, lng: 151.2093 }"
-      :zoom="12"
       :width="800"
       :height="500"
-      :map-options="{ mapId: 'DEMO_MAP_ID' }"
+      :map-options="{ mapId: 'DEMO_MAP_ID', center: { lat: -33.8688, lng: 151.2093 }, zoom: 12 }"
     >
       <ScriptGoogleMapsMarker
         v-for="place in places"
@@ -34,9 +32,9 @@ const places = [
         <ScriptGoogleMapsOverlayView
           v-if="selected === place.id"
           anchor="bottom-center"
+          class="w-64 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 data-[state=open]:animate-[overlayIn_200ms_ease-out]"
           :offset="{ x: 0, y: -50 }"
         >
-          <div class="w-64 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5">
             <div class="flex items-start justify-between gap-2">
               <h3 class="text-sm font-semibold text-gray-900">
                 {{ place.name }}
@@ -60,9 +58,22 @@ const places = [
             <button class="mt-3 w-full rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700">
               View details
             </button>
-          </div>
         </ScriptGoogleMapsOverlayView>
       </ScriptGoogleMapsMarker>
     </ScriptGoogleMaps>
   </div>
 </template>
+
+<style>
+@keyframes overlayIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+</style>
diff --git a/playground/pages/third-parties/google-maps/query.vue b/playground/pages/third-parties/google-maps/query.vue
index 9a6448700..2d045aa5b 100644
--- a/playground/pages/third-parties/google-maps/query.vue
+++ b/playground/pages/third-parties/google-maps/query.vue
@@ -1,15 +1,29 @@
 <script setup lang="ts">
+import type { ScriptGoogleMapsProps } from '#nuxt-scripts/components/GoogleMaps/ScriptGoogleMaps.vue'
 import { ref } from 'vue'
 
-const center = ref<string>('Brooklyn+Bride,New+York+NY')
+const googleMapsRef = useTemplateRef('googleMapsRef')
 
-function changeQuery() {
-  if (center.value.startsWith('Statue')) {
-    center.value = 'Brooklyn+Bride,New+York+NY'
-  }
-  else {
-    center.value = 'Statue+of+Liberty+National+Monument+New+York+NY'
-  }
+const query = ref('Brooklyn+Bride,New+York+NY')
+
+const center = ref<google.maps.LatLng | google.maps.LatLngLiteral>({ lat: -34.397, lng: 150.644 })
+
+async function changeQuery() {
+    if (!googleMapsRef.value) {
+        return
+    }
+
+    query.value = query.value.startsWith('Statue')
+        ? 'Brooklyn+Bride,New+York+NY'
+        : 'Statue+of+Liberty+National+Monument+New+York+NY'
+
+    const queryLatLng = await googleMapsRef.value.resolveQueryToLatLng(
+        query.value
+    )
+
+    if (queryLatLng) {
+        center.value = queryLatLng
+    }
 }
 </script>
 
@@ -17,10 +31,13 @@ function changeQuery() {
   <div>
     <div>
       <ScriptGoogleMaps
+        ref="googleMapsRef"
         api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
-        :center="center"
+        :map-options="{
+            center
+        }"
       />
     </div>
     <div class="button-container">
diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue
index c3617dac8..cfac77046 100644
--- a/playground/pages/third-parties/google-maps/sfcs.vue
+++ b/playground/pages/third-parties/google-maps/sfcs.vue
@@ -65,22 +65,22 @@ const zoom = ref(8)
 
 const googleMapsRef = useTemplateRef('googleMapsRef')
 
-whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
+whenever(() => googleMapsRef.value?.mapsApi, (mapsApi) => {
   heatmapLayerData.value.push(...[
-    new googleMaps.LatLng(-33.8688, 151.2093),
-    new googleMaps.LatLng(-33.8690, 151.2100),
-    new googleMaps.LatLng(-33.8700, 151.2150),
-    new googleMaps.LatLng(-33.8710, 151.2200),
-    new googleMaps.LatLng(-33.8720, 151.2250),
-    new googleMaps.LatLng(-33.8730, 151.2300),
-    new googleMaps.LatLng(-33.8740, 151.2350),
-    new googleMaps.LatLng(-33.8750, 151.2400),
-    new googleMaps.LatLng(-33.8760, 151.2450),
-    new googleMaps.LatLng(-33.8770, 151.2500),
-    new googleMaps.LatLng(-33.8780, 151.2550),
-    new googleMaps.LatLng(-33.8790, 151.2600),
-    new googleMaps.LatLng(-33.8800, 151.2650),
-    new googleMaps.LatLng(-33.8810, 151.2700),
+    new mapsApi.LatLng(-33.8688, 151.2093),
+    new mapsApi.LatLng(-33.8690, 151.2100),
+    new mapsApi.LatLng(-33.8700, 151.2150),
+    new mapsApi.LatLng(-33.8710, 151.2200),
+    new mapsApi.LatLng(-33.8720, 151.2250),
+    new mapsApi.LatLng(-33.8730, 151.2300),
+    new mapsApi.LatLng(-33.8740, 151.2350),
+    new mapsApi.LatLng(-33.8750, 151.2400),
+    new mapsApi.LatLng(-33.8760, 151.2450),
+    new mapsApi.LatLng(-33.8770, 151.2500),
+    new mapsApi.LatLng(-33.8780, 151.2550),
+    new mapsApi.LatLng(-33.8790, 151.2600),
+    new mapsApi.LatLng(-33.8800, 151.2650),
+    new mapsApi.LatLng(-33.8810, 151.2700),
   ])
 })
 </script>
@@ -92,10 +92,10 @@ whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
       api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
       :width="1280"
       :height="720"
-      :zoom="zoom"
       :map-options="{
         center: { lat: -34.397, lng: 150.644 },
         mapId: 'DEMO_MAP_ID',
+        zoom,
       }"
     >
       <ScriptGoogleMapsInfoWindow
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 0c5622153..000000000
--- 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>

From 0ea65d821f199d10af74b7c3bbca8e8897eb970d Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 10:42:59 +0200
Subject: [PATCH 2/9] chore: lint

---
 test/e2e-dev/first-party.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/e2e-dev/first-party.test.ts b/test/e2e-dev/first-party.test.ts
index 7397d106a..b69e24c2f 100644
--- a/test/e2e-dev/first-party.test.ts
+++ b/test/e2e-dev/first-party.test.ts
@@ -1,9 +1,9 @@
 import { existsSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { createResolver } from '@nuxt/kit'
+import { getProxyDef, registry } from '@nuxt/scripts/registry'
 import { $fetch, getBrowser, setup, url } from '@nuxt/test-utils/e2e'
 import { afterAll, beforeAll, describe, expect, it } from 'vitest'
-import { getProxyDef, registry } from '@nuxt/scripts/registry'
 
 const { resolve } = createResolver(import.meta.url)
 const fixtureDir = resolve('../fixtures/first-party')
@@ -96,7 +96,6 @@ const ANONYMIZED_FINGERPRINT_PARAMS = [
   'client_user_agent',
 ]
 
-
 /** Check that a capture has a fully-resolved privacy object with all six boolean flags. */
 function hasResolvedPrivacy(c: Record<string, any>): boolean {
   const p = c.privacy

From 6fcebc96119c8894e1a81a7716867f073187fcdf Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 10:51:47 +0200
Subject: [PATCH 3/9] add missing shallowRef import

---
 .../components/GoogleMaps/ScriptGoogleMapsOverlayView.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index a3dcf0d0b..f8e1db349 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ShallowRef, WatchHandle } from 'vue'
 import { useVModel, whenever } from '@vueuse/core'
-import { computed, inject, useTemplateRef, watch } from 'vue'
+import { computed, inject, useTemplateRef, watch, shallowRef } from 'vue'
 import { MARKER_CLUSTERER_INJECTION_KEY } from './types'
 import { MARKER_INJECTION_KEY, useGoogleMapsResource } from './useGoogleMapsResource'
 
@@ -100,7 +100,7 @@ defineSlots<{
 const open = useVModel(props, 'open', emit, {
   defaultValue: props.defaultOpen,
   passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+}) as ShallowRef<boolean>
 
 const markerContext = inject(MARKER_INJECTION_KEY, undefined)
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined)

From 48420b722874dd3975154822c5662c0636d42bff Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 10:52:47 +0200
Subject: [PATCH 4/9] fix typo

---
 playground/pages/third-parties/google-maps/nuxt-scripts.vue | 2 +-
 playground/pages/third-parties/google-maps/query.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/pages/third-parties/google-maps/nuxt-scripts.vue b/playground/pages/third-parties/google-maps/nuxt-scripts.vue
index b76cb17ce..bf70bdc29 100644
--- a/playground/pages/third-parties/google-maps/nuxt-scripts.vue
+++ b/playground/pages/third-parties/google-maps/nuxt-scripts.vue
@@ -9,7 +9,7 @@ const mapOptions = ref({
 const googleMapsRef = useTemplateRef('googleMapsRef')
 
 async function changeQuery() {
-    const res = await googleMapsRef.value.resolveQueryToLatLng('Brooklyn+Bride,New+York+NY')
+    const res = await googleMapsRef.value.resolveQueryToLatLng('Brooklyn+Bridge,New+York+NY')
 
   mapOptions.value.center = res
 }
diff --git a/playground/pages/third-parties/google-maps/query.vue b/playground/pages/third-parties/google-maps/query.vue
index 2d045aa5b..c57e83395 100644
--- a/playground/pages/third-parties/google-maps/query.vue
+++ b/playground/pages/third-parties/google-maps/query.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 
 const googleMapsRef = useTemplateRef('googleMapsRef')
 
-const query = ref('Brooklyn+Bride,New+York+NY')
+const query = ref('Brooklyn+Bridge,New+York+NY')
 
 const center = ref<google.maps.LatLng | google.maps.LatLngLiteral>({ lat: -34.397, lng: 150.644 })
 
@@ -14,7 +14,7 @@ async function changeQuery() {
     }
 
     query.value = query.value.startsWith('Statue')
-        ? 'Brooklyn+Bride,New+York+NY'
+        ? 'Brooklyn+Bridge,New+York+NY'
         : 'Statue+of+Liberty+National+Monument+New+York+NY'
 
     const queryLatLng = await googleMapsRef.value.resolveQueryToLatLng(

From fdb78b1007fa02e5c51e089c1acc602f02831672 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 11:08:02 +0200
Subject: [PATCH 5/9] remove API keys from SFC maps

---
 playground/pages/third-parties/google-maps/center.vue       | 2 --
 playground/pages/third-parties/google-maps/emit-test.vue    | 1 -
 playground/pages/third-parties/google-maps/geojson-test.vue | 1 -
 playground/pages/third-parties/google-maps/markers.vue      | 1 -
 playground/pages/third-parties/google-maps/null.vue         | 1 -
 playground/pages/third-parties/google-maps/query.vue        | 1 -
 playground/pages/third-parties/google-maps/sfcs.vue         | 1 -
 7 files changed, 8 deletions(-)

diff --git a/playground/pages/third-parties/google-maps/center.vue b/playground/pages/third-parties/google-maps/center.vue
index 540822b5f..93b0491d1 100644
--- a/playground/pages/third-parties/google-maps/center.vue
+++ b/playground/pages/third-parties/google-maps/center.vue
@@ -20,8 +20,6 @@ function changeQuery() {
   <div>
     <div>
       <ScriptGoogleMaps
-        ref="googleMapsRef"
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
         :map-options="mapOptions"
diff --git a/playground/pages/third-parties/google-maps/emit-test.vue b/playground/pages/third-parties/google-maps/emit-test.vue
index 946a0210d..005806848 100644
--- a/playground/pages/third-parties/google-maps/emit-test.vue
+++ b/playground/pages/third-parties/google-maps/emit-test.vue
@@ -58,7 +58,6 @@ const circleOptions = {
       </p>
 
       <ScriptGoogleMaps
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="800"
         :height="500"
         :map-options="{
diff --git a/playground/pages/third-parties/google-maps/geojson-test.vue b/playground/pages/third-parties/google-maps/geojson-test.vue
index 4d0c145f4..476ada55c 100644
--- a/playground/pages/third-parties/google-maps/geojson-test.vue
+++ b/playground/pages/third-parties/google-maps/geojson-test.vue
@@ -92,7 +92,6 @@ const secondGeoJson = {
       </p>
 
       <ScriptGoogleMaps
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="800"
         :height="450"
         :map-options="{ center: { lat: -33.875, lng: 151.22 }, zoom: 13 }"
diff --git a/playground/pages/third-parties/google-maps/markers.vue b/playground/pages/third-parties/google-maps/markers.vue
index 8b2da80fd..f52aeffe6 100644
--- a/playground/pages/third-parties/google-maps/markers.vue
+++ b/playground/pages/third-parties/google-maps/markers.vue
@@ -25,7 +25,6 @@ function removeMarkers() {
   <div>
     <div>
       <ScriptGoogleMaps
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
         :map-options="{ center }"
diff --git a/playground/pages/third-parties/google-maps/null.vue b/playground/pages/third-parties/google-maps/null.vue
index e63239ad6..434a6c477 100644
--- a/playground/pages/third-parties/google-maps/null.vue
+++ b/playground/pages/third-parties/google-maps/null.vue
@@ -15,7 +15,6 @@ function changeQuery() {
   <div>
     <div>
       <ScriptGoogleMaps
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
         :map-options="{
diff --git a/playground/pages/third-parties/google-maps/query.vue b/playground/pages/third-parties/google-maps/query.vue
index c57e83395..d3ebf2aa7 100644
--- a/playground/pages/third-parties/google-maps/query.vue
+++ b/playground/pages/third-parties/google-maps/query.vue
@@ -32,7 +32,6 @@ async function changeQuery() {
     <div>
       <ScriptGoogleMaps
         ref="googleMapsRef"
-        api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
         :width="1200"
         :height="600"
         :map-options="{
diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue
index cfac77046..6c924e153 100644
--- a/playground/pages/third-parties/google-maps/sfcs.vue
+++ b/playground/pages/third-parties/google-maps/sfcs.vue
@@ -89,7 +89,6 @@ whenever(() => googleMapsRef.value?.mapsApi, (mapsApi) => {
   <div>
     <ScriptGoogleMaps
       ref="googleMapsRef"
-      api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
       :width="1280"
       :height="720"
       :map-options="{

From b2af26fe0304a09b10eb84fb65cf6b478a3b9779 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 11:08:33 +0200
Subject: [PATCH 6/9] add `will-change: transform` to overlay view anchor

---
 .../components/GoogleMaps/ScriptGoogleMapsOverlayView.vue    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index f8e1db349..d55a6e6ab 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -349,10 +349,11 @@ defineExpose<ScriptGoogleMapsOverlayViewExpose>({ overlayView, dataState })
     <div
       ref="overlay-anchor" :style="{
         position: 'absolute',
-        left: `${overlayPosition?.x ?? 0 + (props.offset?.x ?? 0)}px`,
-        top: `${overlayPosition?.y ?? 0 + (props.offset?.y ?? 0)}px`,
+        left: `${overlayPosition?.x ?? 0}px`,
+        top: `${overlayPosition?.y ?? 0}px`,
         transform: ANCHOR_TRANSFORMS[anchor],
         zIndex,
+        willChange: 'transform',
         visibility: open ? 'visible' : 'hidden',
         pointerEvents: open ? 'auto' : 'none',
       }"

From 9efe02c94a13f28d612793b87ff8daedfd4c7576 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 11:11:12 +0200
Subject: [PATCH 7/9] reorder import

---
 .../components/GoogleMaps/ScriptGoogleMapsOverlayView.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index d55a6e6ab..297e63343 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ShallowRef, WatchHandle } from 'vue'
 import { useVModel, whenever } from '@vueuse/core'
-import { computed, inject, useTemplateRef, watch, shallowRef } from 'vue'
+import { computed, inject, shallowRef, useTemplateRef, watch } from 'vue'
 import { MARKER_CLUSTERER_INJECTION_KEY } from './types'
 import { MARKER_INJECTION_KEY, useGoogleMapsResource } from './useGoogleMapsResource'
 

From b6d989d9eca1bbbb8d5970a09d547c3ecd21da26 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 11:14:11 +0200
Subject: [PATCH 8/9] change to immediate watch

---
 .../src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
index 13664c793..12f86b807 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
@@ -250,6 +250,8 @@ async function resolveQueryToLatLng(query: string): Promise<google.maps.LatLng |
       const _ = watch(mapsApi, () => {
         _()
         resolve()
+      }, {
+        immediate: true,
       })
     })
   }

From 3e42e0323dae5ab92413f0389529ab224c6e12a4 Mon Sep 17 00:00:00 2001
From: Damian Glowala <damian.glowala.rebkow@gmail.com>
Date: Sun, 5 Apr 2026 11:23:19 +0200
Subject: [PATCH 9/9] refactor watch params

---
 .../GoogleMaps/ScriptGoogleMapsOverlayView.vue         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
index 297e63343..5b87a7beb 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue
@@ -305,7 +305,13 @@ if (markerContext) {
 // Reposition on prop changes (draw() is designed to be called repeatedly)
 // Only watches explicit props — marker position changes are handled by event listeners above
 watch(
-  () => [props.position?.lat, props.position?.lng, props.offset?.x, props.offset?.y, props.zIndex, props.anchor],
+  [
+    () => props.position,
+    () => props.offset?.x,
+    () => props.offset?.y,
+    () => props.zIndex,
+    () => props.anchor,
+  ],
   () => { overlayView.value?.draw() },
 )
 
@@ -322,7 +328,7 @@ watch([() => props.pane, () => props.blockMapInteraction], () => {
 // Auto-hide overlay when its parent marker joins a cluster
 if (markerClustererContext && markerContext) {
   watch(
-    () => markerClustererContext.clusteringVersion.value,
+    markerClustererContext.clusteringVersion,
     () => {
       if (!props.hideWhenClustered || open.value === false)
         return