@nuxt/scripts 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,19 +1,21 @@
-<template>
-  <slot v-if="marker" />
-</template>
-
 <script>
-import { inject, onUnmounted, provide, shallowRef } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { inject, provide, watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { MARKER_INJECTION_KEY } from "./injectionKeys";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const MARKER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+export { MARKER_INJECTION_KEY } from "./injectionKeys";
 </script>
 
 <script setup>
 const props = defineProps({
+  position: { type: null, required: false },
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["animation_changed", "clickable_changed", "cursor_changed", "draggable_changed", "flat_changed", "icon_changed", "position_changed", "shape_changed", "title_changed", "visible_changed", "zindex_changed", "click", "contextmenu", "dblclick", "drag", "dragend", "dragstart", "mousedown", "mouseout", "mouseover", "mouseup"]);
+if (import.meta.dev) {
+  console.warn("[nuxt-scripts] ScriptGoogleMapsMarker uses the deprecated google.maps.Marker class. Use ScriptGoogleMapsAdvancedMarkerElement instead.");
+}
 const eventsWithoutPayload = [
   "animation_changed",
   "clickable_changed",
@@ -39,47 +41,48 @@ const eventsWithMapMouseEventPayload = [
   "mouseover",
   "mouseup"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
-const marker = shallowRef(void 0);
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  marker.value = new mapContext.mapsApi.value.Marker(props.options);
-  setupMarkerEventListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(mapContext.map.value);
+const marker = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const m = new mapsApi.Marker({
+      ...props.options,
+      ...props.position ? { position: props.position } : {}
+    });
+    bindGoogleMapsEvents(m, emit, {
+      noPayload: eventsWithoutPayload,
+      withPayload: eventsWithMapMouseEventPayload
+    });
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.addMarker(m, true);
+      markerClustererContext.requestRerender();
+    } else {
+      m.setMap(map);
+    }
+    return m;
+  },
+  cleanup(m, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(m);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.removeMarker(m, true);
+      markerClustererContext.requestRerender();
+    } else {
+      m.setMap(null);
+    }
   }
-  whenever(() => props.options, (options) => {
-    marker.value?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
 });
-onUnmounted(() => {
-  if (!marker.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.removeMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(null);
+watch(() => props.position, (position) => {
+  if (marker.value && position) {
+    marker.value.setPosition(position);
   }
 });
+watch(() => props.options, (options) => {
+  if (marker.value && options) {
+    marker.value.setOptions(options);
+  }
+}, { deep: true });
 provide(MARKER_INJECTION_KEY, { marker });
-function setupMarkerEventListeners(marker2) {
-  eventsWithoutPayload.forEach((event) => {
-    marker2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    marker2.addListener(event, (payload) => emit(event, payload));
-  });
-}
 </script>
+
+<template>
+  <slot v-if="marker" />
+</template>

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

@@ -1,14 +1,20 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const MARKER_INJECTION_KEY: InjectionKey<{
-    marker: ShallowRef<google.maps.Marker | undefined>;
-}>;
+export { MARKER_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * The position of the marker on the map.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.position
+     */
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
+    /**
+     * Configuration options for the legacy marker. Deprecated: use ScriptGoogleMapsAdvancedMarkerElement instead.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions
+     */
     options?: Omit<google.maps.MarkerOptions, "map">;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.MapMouseEvent) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.MapMouseEvent) => any;
+    click: (payload: google.maps.MapMouseEvent) => any;
     dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -17,22 +23,31 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     mouseout: (payload: google.maps.MapMouseEvent) => any;
     mouseover: (payload: google.maps.MapMouseEvent) => any;
     mouseup: (payload: google.maps.MapMouseEvent) => any;
+    position_changed: () => any;
+    zindex_changed: () => any;
     animation_changed: () => any;
     clickable_changed: () => any;
     cursor_changed: () => any;
     draggable_changed: () => any;
     flat_changed: () => any;
     icon_changed: () => any;
-    position_changed: () => any;
     shape_changed: () => any;
     title_changed: () => any;
     visible_changed: () => any;
-    zindex_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The position of the marker on the map.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.position
+     */
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
+    /**
+     * Configuration options for the legacy marker. Deprecated: use ScriptGoogleMapsAdvancedMarkerElement instead.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions
+     */
     options?: Omit<google.maps.MarkerOptions, "map">;
 }> & Readonly<{
-    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
@@ -41,17 +56,17 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     onMouseout?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onMouseover?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onMouseup?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
+    onPosition_changed?: (() => any) | undefined;
+    onZindex_changed?: (() => any) | undefined;
     onAnimation_changed?: (() => any) | undefined;
     onClickable_changed?: (() => any) | undefined;
     onCursor_changed?: (() => any) | undefined;
     onDraggable_changed?: (() => any) | undefined;
     onFlat_changed?: (() => any) | undefined;
     onIcon_changed?: (() => any) | undefined;
-    onPosition_changed?: (() => any) | undefined;
     onShape_changed?: (() => any) | undefined;
     onTitle_changed?: (() => any) | undefined;
     onVisible_changed?: (() => any) | undefined;
-    onZindex_changed?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

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

@@ -1,4 +1,4 @@
-import { type InjectionKey, type ShallowRef } from 'vue';
+import type { InjectionKey, ShallowRef } from 'vue';
 export interface MarkerClustererInstance {
     render: () => void;
     setMap: (map: google.maps.Map | null) => void;
@@ -19,12 +19,20 @@ export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Configuration options for the marker clusterer.
+     * @see https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html
+     */
     options?: Omit<MarkerClustererOptions, "map">;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (payload: MarkerClustererInstance) => any;
     clusteringbegin: (payload: MarkerClustererInstance) => any;
     clusteringend: (payload: MarkerClustererInstance) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Configuration options for the marker clusterer.
+     * @see https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html
+     */
     options?: Omit<MarkerClustererOptions, "map">;
 }> & Readonly<{
     onClick?: ((payload: MarkerClustererInstance) => any) | undefined;

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

@@ -1,11 +1,7 @@
-<template>
-  <slot v-if="markerClusterer" />
-</template>
-
 <script>
-import { inject, onUnmounted, provide, shallowRef } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { provide, shallowRef, watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clusterer");
 </script>
 
@@ -13,40 +9,46 @@ export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clu
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["click", "clusteringbegin", "clusteringend"]);
 const markerClustererEvents = [
   "click",
   "clusteringbegin",
   "clusteringend"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-const markerClusterer = shallowRef(void 0);
-whenever(() => mapContext?.map.value, async (map) => {
-  const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
-  markerClusterer.value = new MarkerClusterer({
-    map,
-    ...props.options
-  });
-  setupMarkerClustererEventListeners(markerClusterer.value);
-}, {
-  immediate: true,
-  once: true
+const markerClusterer = useGoogleMapsResource({
+  async create({ map }) {
+    const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
+    const clusterer = new MarkerClusterer({
+      map,
+      ...props.options
+    });
+    bindGoogleMapsEvents(clusterer, emit, { withPayload: markerClustererEvents });
+    return clusterer;
+  },
+  cleanup(clusterer, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(clusterer);
+    clusterer.setMap(null);
+  }
 });
-const markerClustererNeedsRerender = shallowRef(false);
+const rerenderPending = shallowRef(false);
 function requestRerender() {
-  markerClustererNeedsRerender.value = true;
+  rerenderPending.value = true;
 }
-whenever(() => markerClustererNeedsRerender.value && markerClusterer.value, () => {
-  markerClusterer.value.render();
-  markerClustererNeedsRerender.value = false;
-});
-onUnmounted(() => {
-  if (!markerClusterer.value || !mapContext?.mapsApi.value) {
-    return;
+watch(
+  () => rerenderPending.value && markerClusterer.value,
+  (ready) => {
+    if (!ready)
+      return;
+    rerenderPending.value = false;
+    try {
+      markerClusterer.value.render();
+    } catch (err) {
+      if (import.meta.dev) {
+        console.error("[nuxt-scripts] MarkerClusterer render failed:", err);
+      }
+    }
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(markerClusterer.value);
-  markerClusterer.value.setMap(null);
-});
+);
 provide(
   MARKER_CLUSTERER_INJECTION_KEY,
   {
@@ -54,9 +56,8 @@ provide(
     requestRerender
   }
 );
-function setupMarkerClustererEventListeners(clusterer) {
-  markerClustererEvents.forEach((event) => {
-    clusterer.addListener(event, () => emit(event, clusterer));
-  });
-}
 </script>
+
+<template>
+  <slot v-if="markerClusterer" />
+</template>

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

@@ -1,4 +1,4 @@
-import { type InjectionKey, type ShallowRef } from 'vue';
+import type { InjectionKey, ShallowRef } from 'vue';
 export interface MarkerClustererInstance {
     render: () => void;
     setMap: (map: google.maps.Map | null) => void;
@@ -19,12 +19,20 @@ export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Configuration options for the marker clusterer.
+     * @see https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html
+     */
     options?: Omit<MarkerClustererOptions, "map">;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (payload: MarkerClustererInstance) => any;
     clusteringbegin: (payload: MarkerClustererInstance) => any;
     clusteringend: (payload: MarkerClustererInstance) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Configuration options for the marker clusterer.
+     * @see https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html
+     */
     options?: Omit<MarkerClustererOptions, "map">;
 }> & Readonly<{
     onClick?: ((payload: MarkerClustererInstance) => any) | undefined;

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

@@ -0,0 +1,63 @@
+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 = {
+    /**
+     * 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;
+    /**
+     * Anchor point of the overlay relative to its position.
+     * @default 'bottom-center'
+     */
+    anchor?: OverlayAnchor;
+    /**
+     * 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;
+    /**
+     * CSS z-index for the overlay element.
+     */
+    zIndex?: number;
+    /**
+     * Whether to block map click and gesture events from passing through the overlay.
+     * @default true
+     */
+    blockMapInteraction?: boolean;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    overlay: import("vue").ShallowRef<google.maps.OverlayView | undefined>;
+}, {}, {}, {}, 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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,160 @@
+<script setup>
+import { inject, useTemplateRef, watch } from "vue";
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY, MARKER_INJECTION_KEY } from "./injectionKeys";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+const props = defineProps({
+  position: { type: null, required: false },
+  anchor: { type: String, required: false, default: "bottom-center" },
+  offset: { type: Object, required: false },
+  pane: { type: String, required: false, default: "floatPane" },
+  zIndex: { type: Number, required: false },
+  blockMapInteraction: { type: Boolean, required: false, default: true }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: void 0 } });
+const markerContext = inject(MARKER_INJECTION_KEY, void 0);
+const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, void 0);
+function getResolvedPosition() {
+  if (props.position)
+    return props.position;
+  if (markerContext?.marker.value) {
+    const pos = markerContext.marker.value.getPosition();
+    if (pos)
+      return { lat: pos.lat(), lng: pos.lng() };
+  }
+  if (advancedMarkerElementContext?.advancedMarkerElement.value) {
+    const pos = advancedMarkerElementContext.advancedMarkerElement.value.position;
+    if (pos) {
+      if ("lat" in pos && typeof pos.lat === "function")
+        return { lat: pos.lat(), lng: pos.lng() };
+      return pos;
+    }
+  }
+  return void 0;
+}
+const ANCHOR_TRANSFORMS = {
+  "center": "translate(-50%, -50%)",
+  "top-left": "translate(0, 0)",
+  "top-center": "translate(-50%, 0)",
+  "top-right": "translate(-100%, 0)",
+  "bottom-left": "translate(0, -100%)",
+  "bottom-center": "translate(-50%, -100%)",
+  "bottom-right": "translate(-100%, -100%)",
+  "left-center": "translate(0, -50%)",
+  "right-center": "translate(-100%, -50%)"
+};
+const overlayContent = useTemplateRef("overlay-content");
+const listeners = [];
+const overlay = useGoogleMapsResource({
+  // ready condition accesses .value on ShallowRefs — tracked by whenever() in useGoogleMapsResource
+  ready: () => !!overlayContent.value && !!(props.position || markerContext?.marker.value || advancedMarkerElementContext?.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);
+        }
+      }
+      draw() {
+        if (open.value === false) {
+          el.style.visibility = "hidden";
+          return;
+        }
+        const position = getResolvedPosition();
+        if (!position) {
+          el.style.visibility = "hidden";
+          return;
+        }
+        const projection = this.getProjection();
+        if (!projection) {
+          el.style.visibility = "hidden";
+          return;
+        }
+        const pos = projection.fromLatLngToDivPixel(
+          new mapsApi.LatLng(position.lat, position.lng)
+        );
+        if (!pos) {
+          el.style.visibility = "hidden";
+          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";
+      }
+      onRemove() {
+        el.parentNode?.removeChild(el);
+      }
+    }
+    el.style.visibility = "hidden";
+    const ov = new CustomOverlay();
+    ov.setMap(map);
+    if (markerContext?.marker.value) {
+      listeners.push(
+        markerContext.marker.value.addListener("position_changed", () => ov.draw())
+      );
+    } else if (advancedMarkerElementContext?.advancedMarkerElement.value) {
+      const ame = advancedMarkerElementContext.advancedMarkerElement.value;
+      listeners.push(
+        ame.addListener("drag", () => ov.draw()),
+        ame.addListener("dragend", () => ov.draw())
+      );
+    }
+    return ov;
+  },
+  cleanup(ov) {
+    listeners.forEach((l) => l.remove());
+    listeners.length = 0;
+    ov.setMap(null);
+  }
+});
+if (advancedMarkerElementContext) {
+  watch(
+    () => {
+      const pos = advancedMarkerElementContext.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;
+    },
+    () => {
+      overlay.value?.draw();
+    }
+  );
+}
+watch(
+  () => [props.position?.lat, props.position?.lng, props.offset?.x, props.offset?.y, props.zIndex, props.anchor],
+  () => {
+    overlay.value?.draw();
+  }
+);
+watch(() => open.value, () => {
+  if (!overlay.value)
+    return;
+  overlay.value.draw();
+});
+watch([() => props.pane, () => props.blockMapInteraction], () => {
+  if (overlay.value) {
+    const map = overlay.value.getMap();
+    overlay.value.setMap(null);
+    if (map)
+      overlay.value.setMap(map);
+  }
+});
+defineExpose({ overlay });
+</script>
+
+<template>
+  <div style="display: none;">
+    <div ref="overlay-content">
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,63 @@
+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 = {
+    /**
+     * 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;
+    /**
+     * Anchor point of the overlay relative to its position.
+     * @default 'bottom-center'
+     */
+    anchor?: OverlayAnchor;
+    /**
+     * 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;
+    /**
+     * CSS z-index for the overlay element.
+     */
+    zIndex?: number;
+    /**
+     * Whether to block map click and gesture events from passing through the overlay.
+     * @default true
+     */
+    blockMapInteraction?: boolean;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    overlay: import("vue").ShallowRef<google.maps.OverlayView | undefined>;
+}, {}, {}, {}, 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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,8 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the pin element that customizes the visual appearance of the marker.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions
+     */
     options?: Omit<google.maps.marker.PinElementOptions, 'map'>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;