From 4380b074504a0b9570495f14d159f4e70ed7df88 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 9 Apr 2026 22:21:04 +1000
Subject: [PATCH 1/3] refactor(google-maps): export typed interfaces, internal
 cleanups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Splits the safe, additive changes out of #689 so they can land
independently of the larger breaking refactor.

- Export `ScriptGoogleMapsProps`/`Emits`/`Slots`/`Expose` and the
  matching `ScriptGoogleMapsOverlayView*` interfaces so consumers can
  type their template refs and event handlers.
- Modernise internal vars: `useTemplateRef` for `rootEl`/`mapEl`,
  `mapsApi` switched to `shallowRef`, internal `ready` ref renamed
  to `isMapReady` for clearer intent.
- Tidy `resolveQueryToLatLng` so the cache always returns a
  consistent `LatLngLiteral` shape.
- Collapse the color-mode logic into a single computed.
- Use `instanceof google.maps.LatLng` to normalise marker positions
  in the overlay component.
- Drop the `styled.vue` playground page; it relied on the deprecated
  `styles` map option which conflicts with `mapId`.

No public API changes — `center`/`zoom` props, `googleMaps` expose,
`ready` event payload, location-query auto-resolution, and the
`setCenter` skip-if-equal optimisation are all preserved.
---
 .../GoogleMaps/ScriptGoogleMaps.vue           | 218 +++++++++++-------
 .../ScriptGoogleMapsOverlayView.vue           |  81 ++++---
 playground/pages/index.vue                    |   6 -
 .../third-parties/google-maps/styled.vue      |  19 --
 4 files changed, 186 insertions(+), 138 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 5ae811fb..5a509d0f 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()
 
@@ -175,11 +219,12 @@ function isLocationQuery(s: string | any) {
 
 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)
@@ -198,31 +243,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 +305,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 +328,7 @@ provide(MAP_INJECTION_KEY, {
 })
 
 onMounted(() => {
-  watch(ready, (v) => {
+  watch(isMapReady, (v) => {
     if (v) {
       emits('ready', googleMaps)
     }
@@ -299,13 +350,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 +385,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 +456,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>

From 0fb9b6d06338a133b5cd56da2c8434662df61ba1 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 9 Apr 2026 22:24:03 +1000
Subject: [PATCH 2/3] chore(eslint): disable import/first on .vue files

The rule misfires on SFCs that use two <script> blocks (one for
exported types, one for setup): it concatenates the blocks and
flags the setup-block imports as appearing after the exports.
---
 eslint.config.mjs | 10 ++++++++++
 1 file changed, 10 insertions(+)

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',
+    },
+  },
 )

From f209b112ffe36c60d7fd82933c7efa04b61d6365 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 9 Apr 2026 22:34:54 +1000
Subject: [PATCH 3/3] refactor(google-maps): keep resolveQueryToLatLng cache
 shape unchanged
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reverts the cache-hit normalisation introduced in the previous
commit. The original code stored whatever shape the resolver path
returned (LatLng for Places, LatLngLiteral for proxy) and the
cache-hit path returned the same shape — internally consistent
per path. The normalisation only touched cache hits, which would
have meant the same query returns LatLng on first call but
LatLngLiteral on second call when using the Places fallback.

If we want consistent shapes across both paths, that's a separate
intentional change that should land with a dedicated test.
---
 .../components/GoogleMaps/ScriptGoogleMaps.vue        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
index 5a509d0f..8a37d4ef 100644
--- a/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
+++ b/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue
@@ -219,12 +219,11 @@ function isLocationQuery(s: string | any) {
 
 const queryToLatLngCache = new Map<string, google.maps.LatLng | google.maps.LatLngLiteral>()
 
-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 }
+async function resolveQueryToLatLng(query: string) {
+  if (query && typeof query === 'object')
+    return Promise.resolve(query)
+  if (queryToLatLngCache.has(query)) {
+    return Promise.resolve(queryToLatLngCache.get(query))
   }
 
   // Use geocode proxy if available (avoids loading Places library client-side)