@nuxt/scripts 1.0.0-rc.5 → 1.0.0-rc.7

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue.d.ts

@@ -1,11 +1,10 @@
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
 import type { HTMLAttributes, ReservedProps, ShallowRef } from 'vue';
 export { MAP_INJECTION_KEY } from './useGoogleMapsResource.js';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+export interface ScriptGoogleMapsProps {
     /**
      * Defines the trigger event to load the script.
+     * @default ['mouseenter', 'mouseover', 'mousedown']
      */
     trigger?: ElementScriptTrigger;
     /**
@@ -14,11 +13,20 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     apiKey?: string;
     /**
      * A latitude / longitude of where to focus the map.
+     *
+     * @deprecated Pass `center` via `mapOptions` instead. The top-level `center`
+     * prop will be removed in a future major version. When both are set,
+     * `mapOptions.center` wins.
+     * @see https://scripts.nuxt.com/docs/migration-guide/v0-to-v1
      */
     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.
+     *
+     * @deprecated Pass `zoom` via `mapOptions` instead. The top-level `zoom`
+     * prop will be removed in a future major version. When both are set,
+     * `mapOptions.zoom` wins.
+     * @see https://scripts.nuxt.com/docs/migration-guide/v0-to-v1
      */
     zoom?: number;
     /**
@@ -30,19 +38,21 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      */
     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;
     /**
@@ -60,122 +70,92 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     };
     /**
      * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
-     * Accepts 'light', 'dark', or a reactive ref.
-     */
-    colorMode?: "light" | "dark";
-}, {
-    readonly googleMaps: import("vue").Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
-    readonly map: ShallowRef<google.maps.Map | undefined>;
-    readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
-    readonly 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>;
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: () => any;
-    ready: (e: {
-        readonly googleMaps: import("vue").Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
-        readonly map: ShallowRef<google.maps.Map | undefined>;
-        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
-        readonly 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>;
-        };
-    }) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    /**
-     * Defines the trigger event to load the script.
+     * Accepts 'light' or 'dark'.
      */
-    trigger?: ElementScriptTrigger;
+    colorMode?: 'light' | 'dark';
+}
+export interface ScriptGoogleMapsExpose {
     /**
-     * Defines the Google Maps API key. Must have access to the Static Maps API as well.
+     * A reference to the loaded Google Maps API namespace (`google.maps`), or
+     * `undefined` if not yet loaded.
      */
-    apiKey?: string;
+    mapsApi: ShallowRef<typeof google.maps | undefined>;
     /**
-     * A latitude / longitude of where to focus the map.
+     * A reference to the loaded Google Maps API namespace, or `undefined` if not
+     * yet loaded.
+     *
+     * @deprecated Use `mapsApi` instead. The `googleMaps` alias will be removed
+     * in a future major version.
+     * @see https://scripts.nuxt.com/docs/migration-guide/v0-to-v1
      */
-    center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
+    googleMaps: ShallowRef<typeof google.maps | undefined>;
     /**
-     * Zoom level for the map (0-21). Reactive: changing this will update the map.
-     * Takes precedence over mapOptions.zoom when provided.
+     * A reference to the Google Map instance, or `undefined` if not yet initialized.
      */
-    zoom?: number;
+    map: ShallowRef<google.maps.Map | undefined>;
     /**
-     * Options for the map.
+     * 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.
      */
-    mapOptions?: google.maps.MapOptions;
+    resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
     /**
-     * Defines the region of the map.
+     * Utility function to dynamically import additional Google Maps libraries (e.g. "marker", "places").
+     * Caches imported libraries for efficient reuse.
      */
-    region?: string;
+    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>;
+    };
+}
+export interface ScriptGoogleMapsEmits {
     /**
-     * Defines the language of the map
+     * Fired when the Google Maps instance is fully loaded and ready to use. Provides access to the maps API.
      */
-    language?: string;
+    ready: [payload: ScriptGoogleMapsExpose];
     /**
-     * Defines the version of google maps js API
+     * Fired when the Google Maps script fails to load.
      */
-    version?: string;
+    error: [];
+}
+export interface ScriptGoogleMapsSlots {
     /**
-     * Defines the width of the map.
+     * Default slot for rendering child components (e.g. markers, info windows) that depend on the map being ready.
      */
-    width?: number | string;
+    default?: () => any;
     /**
-     * Defines the height of the map
+     * Slot displayed while the map is loading. Can be used to show a custom loading indicator.
      */
-    height?: number | string;
+    loading?: () => any;
     /**
-     * Customize the root element attributes.
+     * Slot displayed when the script is awaiting user interaction to load (based on the `trigger` prop).
      */
-    rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
+    awaitingLoad?: () => any;
     /**
-     * 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.
+     * Slot displayed if the script fails to load.
      */
-    mapIds?: {
-        light?: string;
-        dark?: string;
-    };
+    error?: () => any;
     /**
-     * Manual color mode control. When provided, overrides auto-detection from @nuxtjs/color-mode.
-     * Accepts 'light', 'dark', or a reactive ref.
+     * Slot displayed as a placeholder before the map is ready. Useful for showing a static map or skeleton.
      */
-    colorMode?: "light" | "dark";
-}> & Readonly<{
+    placeholder?: () => any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptGoogleMapsProps, ScriptGoogleMapsExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    ready: (payload: ScriptGoogleMapsExpose) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptGoogleMapsProps> & Readonly<{
     onError?: (() => any) | undefined;
-    onReady?: ((e: {
-        readonly googleMaps: import("vue").Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
-        readonly map: ShallowRef<google.maps.Map | undefined>;
-        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
-        readonly 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>;
-        };
-    }) => any) | undefined;
+    onReady?: ((payload: ScriptGoogleMapsExpose) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
     width: number | string;
     height: number | string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: () => any;
-    placeholder?: () => any;
-    loading?: () => any;
-    awaitingLoad?: () => any;
-    error?: () => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptGoogleMapsSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.d.vue.ts

@@ -1,16 +1,29 @@
-type OverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
-type OverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer' | 'overlayMouseTarget' | 'floatPane';
-type __VLS_Props = {
+import type { ShallowRef } from 'vue';
+export type ScriptGoogleMapsOverlayAnchor = 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
+export type ScriptGoogleMapsOverlayPane = 'mapPane' | 'overlayLayer' | 'markerLayer' | 'overlayMouseTarget' | 'floatPane';
+export interface ScriptGoogleMapsOverlayViewProps {
     /**
      * Geographic position for the overlay. Falls back to parent marker position if omitted.
+     *
+     * Accepts either a plain `LatLngLiteral` (`{ lat, lng }`) or a
+     * `google.maps.LatLng` instance.
      * @see https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView
      */
-    position?: google.maps.LatLngLiteral;
+    position?: google.maps.LatLng | google.maps.LatLngLiteral;
+    /**
+     * Initial open state for the uncontrolled mode (when `v-model:open` is not
+     * bound). When omitted, the overlay opens on mount, matching v0 behaviour.
+     *
+     * Has no effect when `v-model:open` is used; pass an initial value to the
+     * bound ref instead.
+     * @default true
+     */
+    defaultOpen?: boolean;
     /**
      * Anchor point of the overlay relative to its position.
      * @default 'bottom-center'
      */
-    anchor?: OverlayAnchor;
+    anchor?: ScriptGoogleMapsOverlayAnchor;
     /**
      * Pixel offset from the anchor position.
      */
@@ -23,7 +36,7 @@ type __VLS_Props = {
      * @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.
      */
@@ -45,31 +58,39 @@ type __VLS_Props = {
      * @default true
      */
     hideWhenClustered?: boolean;
-};
-type __VLS_Slots = {
+}
+export interface ScriptGoogleMapsOverlayViewEmits {
+    /** Event handler called when the open state of the overlay view changes. */
+    'update:open': [value: boolean];
+}
+export interface ScriptGoogleMapsOverlayViewSlots {
     default?: () => any;
-};
-type __VLS_ModelProps = {
-    'open'?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    overlay: import("vue").ShallowRef<google.maps.OverlayView | undefined>;
-    dataState: import("vue").ComputedRef<"open" | "closed">;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
-    anchor: OverlayAnchor;
-    pane: OverlayPane;
-    blockMapInteraction: boolean;
-    panOnOpen: boolean | number;
-    hideWhenClustered: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+}
+export interface ScriptGoogleMapsOverlayViewExpose {
+    /** The underlying `OverlayView` instance. */
+    overlayView: ShallowRef<google.maps.OverlayView | undefined>;
+    /**
+     * The underlying `OverlayView` instance.
+     *
+     * @deprecated Use `overlayView` instead. The `overlay` alias will be
+     * removed in a future major version.
+     * @see https://scripts.nuxt.com/docs/migration-guide/v0-to-v1
+     */
+    overlay: ShallowRef<google.maps.OverlayView | undefined>;
+    /** The current data-state of the overlay, either 'open' or 'closed'. */
+    dataState: Readonly<ShallowRef<'open' | 'closed'>>;
+}
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ScriptGoogleMapsOverlayViewProps & {
+    open?: boolean;
+}, ScriptGoogleMapsOverlayViewExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ScriptGoogleMapsOverlayViewProps & {
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ScriptGoogleMapsOverlayViewSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue

@@ -1,35 +1,47 @@
+<script>
+
+</script>
+
 <script setup>
-import { computed, inject, ref, useTemplateRef, watch } from "vue";
+import { computed, inject, shallowRef, useTemplateRef, watch } from "vue";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./types";
-import { MARKER_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
+import { defineDeprecatedAlias, MARKER_INJECTION_KEY, normalizeLatLng, useGoogleMapsResource } from "./useGoogleMapsResource";
 defineOptions({
   inheritAttrs: false
 });
-const props = defineProps({
+const {
+  position,
+  defaultOpen = true,
+  anchor = "bottom-center",
+  offset,
+  pane = "floatPane",
+  zIndex,
+  blockMapInteraction = true,
+  panOnOpen = true,
+  hideWhenClustered = true
+} = defineProps({
   position: { type: null, required: false },
-  anchor: { type: String, required: false, default: "bottom-center" },
+  defaultOpen: { type: Boolean, required: false },
+  anchor: { type: String, required: false },
   offset: { type: Object, required: false },
-  pane: { type: String, required: false, default: "floatPane" },
+  pane: { type: String, required: false },
   zIndex: { type: Number, required: false },
-  blockMapInteraction: { type: Boolean, required: false, default: true },
-  panOnOpen: { type: [Boolean, Number], required: false, default: true },
-  hideWhenClustered: { type: Boolean, required: false, default: true }
+  blockMapInteraction: { type: Boolean, required: false },
+  panOnOpen: { type: [Boolean, Number], required: false },
+  hideWhenClustered: { type: Boolean, required: false }
 });
 defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: void 0 } });
+if (open.value === void 0)
+  open.value = defaultOpen ?? true;
 const markerContext = inject(MARKER_INJECTION_KEY, void 0);
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
 function getResolvedPosition() {
-  if (props.position)
-    return props.position;
-  if (markerContext?.advancedMarkerElement.value) {
-    const pos = markerContext.advancedMarkerElement.value.position;
-    if (pos) {
-      if ("lat" in pos && typeof pos.lat === "function")
-        return { lat: pos.lat(), lng: pos.lng() };
-      return pos;
-    }
-  }
+  if (position)
+    return normalizeLatLng(position);
+  const markerPosition = markerContext?.advancedMarkerElement.value?.position;
+  if (markerPosition)
+    return normalizeLatLng(markerPosition);
   return void 0;
 }
 const ANCHOR_TRANSFORMS = {
@@ -43,21 +55,32 @@ const ANCHOR_TRANSFORMS = {
   "left-center": "translate(0, -50%)",
   "right-center": "translate(-100%, -50%)"
 };
-const overlayContent = useTemplateRef("overlay-content");
-const isPositioned = ref(false);
-const dataState = computed(() => isPositioned.value ? "open" : "closed");
+const overlayAnchor = useTemplateRef("overlay-anchor");
+const overlayPosition = shallowRef(void 0);
+const dataState = computed(
+  () => open.value !== false && overlayPosition.value !== void 0 ? "open" : "closed"
+);
+const overlayStyle = computed(() => {
+  const visible = open.value !== false && overlayPosition.value !== void 0;
+  if (!visible) {
+    return {
+      position: "absolute",
+      visibility: "hidden",
+      pointerEvents: "none"
+    };
+  }
+  const { x, y } = overlayPosition.value;
+  return {
+    position: "absolute",
+    left: `${x + (offset?.x ?? 0)}px`,
+    top: `${y + (offset?.y ?? 0)}px`,
+    transform: ANCHOR_TRANSFORMS[anchor],
+    zIndex: zIndex !== void 0 ? String(zIndex) : void 0,
+    visibility: "visible",
+    pointerEvents: "auto"
+  };
+});
 const listeners = [];
-function setDataState(el, state) {
-  el.dataset.state = state;
-  const child = el.firstElementChild;
-  if (child)
-    child.dataset.state = state;
-}
-function hideElement(el) {
-  el.style.visibility = "hidden";
-  el.style.pointerEvents = "none";
-  setDataState(el, "closed");
-}
 function panMapToFitOverlay(el, map, padding) {
   const child = el.firstElementChild;
   if (!child)
@@ -77,69 +100,59 @@ function panMapToFitOverlay(el, map, padding) {
   if (panX !== 0 || panY !== 0)
     map.panBy(panX, panY);
 }
-const overlay = useGoogleMapsResource({
-  // 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 {
-      onAdd() {
-        const panes = this.getPanes();
-        if (panes) {
-          panes[props.pane].appendChild(el);
-          if (props.blockMapInteraction)
-            mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el);
-        }
-        if (props.panOnOpen) {
-          const padding = typeof props.panOnOpen === "number" ? props.panOnOpen : 40;
-          requestAnimationFrame(() => {
-            panMapToFitOverlay(el, map, padding);
-          });
-        }
+function makeOverlayClass(mapsApi, map) {
+  return class CustomOverlay extends mapsApi.OverlayView {
+    onAdd() {
+      const panes = this.getPanes();
+      const el = overlayAnchor.value;
+      if (panes && el) {
+        panes[pane].appendChild(el);
+        if (blockMapInteraction)
+          mapsApi.OverlayView.preventMapHitsAndGesturesFrom(el);
       }
-      draw() {
-        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 !== void 0)
-          el.style.zIndex = String(props.zIndex);
-        el.style.visibility = "visible";
-        el.style.pointerEvents = "auto";
-        setDataState(el, "open");
-        isPositioned.value = true;
+      if (panOnOpen && open.value !== false) {
+        const padding = typeof panOnOpen === "number" ? panOnOpen : 40;
+        requestAnimationFrame(() => {
+          if (open.value !== false && overlayAnchor.value && overlayPosition.value)
+            panMapToFitOverlay(overlayAnchor.value, map, padding);
+        });
       }
-      onRemove() {
-        el.parentNode?.removeChild(el);
+    }
+    draw() {
+      if (open.value === false) {
+        overlayPosition.value = void 0;
+        return;
       }
+      const resolvedPosition = getResolvedPosition();
+      if (!resolvedPosition) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      const projection = this.getProjection();
+      if (!projection) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      const pos = projection.fromLatLngToDivPixel(
+        new mapsApi.LatLng(resolvedPosition.lat, resolvedPosition.lng)
+      );
+      if (!pos) {
+        overlayPosition.value = void 0;
+        return;
+      }
+      overlayPosition.value = { x: pos.x, y: pos.y };
     }
-    el.style.visibility = "hidden";
-    el.style.pointerEvents = "none";
+    onRemove() {
+      const el = overlayAnchor.value;
+      el?.parentNode?.removeChild(el);
+    }
+  };
+}
+const overlay = useGoogleMapsResource({
+  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
+  ready: () => !!overlayAnchor.value && !!(position || markerContext?.advancedMarkerElement.value),
+  create({ mapsApi, map }) {
+    const CustomOverlay = makeOverlayClass(mapsApi, map);
     const ov = new CustomOverlay();
     ov.setMap(map);
     if (markerContext?.advancedMarkerElement.value) {
@@ -160,12 +173,8 @@ const overlay = useGoogleMapsResource({
 if (markerContext) {
   watch(
     () => {
-      const pos = markerContext.advancedMarkerElement.value?.position;
-      if (!pos)
-        return void 0;
-      if ("lat" in pos && typeof pos.lat === "function")
-        return { lat: pos.lat(), lng: pos.lng() };
-      return pos;
+      const markerPosition = markerContext.advancedMarkerElement.value?.position;
+      return markerPosition ? normalizeLatLng(markerPosition) : void 0;
     },
     () => {
       overlay.value?.draw();
@@ -173,7 +182,10 @@ if (markerContext) {
   );
 }
 watch(
-  () => [props.position?.lat, props.position?.lng, props.offset?.x, props.offset?.y, props.zIndex, props.anchor],
+  () => {
+    const p = position ? normalizeLatLng(position) : void 0;
+    return [p?.lat, p?.lng, offset?.x, offset?.y, zIndex, anchor];
+  },
   () => {
     overlay.value?.draw();
   }
@@ -183,7 +195,7 @@ watch(() => open.value, () => {
     return;
   overlay.value.draw();
 });
-watch([() => props.pane, () => props.blockMapInteraction], () => {
+watch([() => pane, () => blockMapInteraction], () => {
   if (overlay.value) {
     const map = overlay.value.getMap();
     overlay.value.setMap(null);
@@ -195,7 +207,7 @@ if (markerClustererContext && markerContext) {
   watch(
     () => markerClustererContext.clusteringVersion.value,
     () => {
-      if (!props.hideWhenClustered || open.value === false)
+      if (!hideWhenClustered || open.value === false)
         return;
       const clusterer = markerClustererContext.markerClusterer.value;
       if (!clusterer?.clusters)
@@ -211,13 +223,41 @@ if (markerClustererContext && markerContext) {
     }
   );
 }
-defineExpose({ overlay, dataState });
+const exposed = {
+  overlayView: overlay,
+  // Plain alias for production. In dev, replaced below with a getter that
+  // emits a one-shot deprecation warning. Both forms return the same
+  // shallow ref as `overlayView`.
+  overlay,
+  dataState
+};
+if (import.meta.dev) {
+  defineDeprecatedAlias(
+    exposed,
+    "overlay",
+    "overlayView",
+    '[nuxt-scripts] <ScriptGoogleMapsOverlayView> expose key "overlay" is deprecated; use "overlayView" instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1'
+  );
+}
+defineExpose(exposed);
 </script>
 
 <template>
   <div style="display: none;">
-    <div ref="overlay-content" :data-state="dataState" v-bind="$attrs">
-      <slot />
+    <!--
+      Two-element structure:
+        - `overlay-anchor` is moved into a Google Maps pane on `onAdd()`. Its
+          inline style is reactively bound to `overlayStyle`, so position
+          updates from `draw()` flow through Vue's patcher even after the node
+          has been reparented out of the component tree.
+        - `overlay-content` carries `data-state`, attribute-based animations,
+          and forwards parent attrs (e.g. `class`) so consumers can target it
+          directly with `[data-state]` selectors.
+    -->
+    <div ref="overlay-anchor" :style="overlayStyle">
+      <div :data-state="dataState" v-bind="$attrs">
+        <slot />
+      </div>
     </div>
   </div>
 </template>