@nuxt/scripts 1.0.0-beta.7 → 1.0.0-rc.2

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

@@ -1,59 +1,41 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const MARKER_INJECTION_KEY: InjectionKey<{
-    marker: ShallowRef<google.maps.Marker | undefined>;
-}>;
+export { MARKER_INJECTION_KEY } from './useGoogleMapsResource.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    options?: Omit<google.maps.MarkerOptions, "map">;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    /**
+     * The position of the marker on the map.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.position
+     */
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
+    /**
+     * Configuration options for the marker.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions
+     */
+    options?: Omit<google.maps.marker.AdvancedMarkerElementOptions, "map">;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (payload: google.maps.MapMouseEvent) => any;
-    contextmenu: (payload: google.maps.MapMouseEvent) => any;
-    dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
     dragstart: (payload: google.maps.MapMouseEvent) => any;
-    mousedown: (payload: google.maps.MapMouseEvent) => any;
-    mouseout: (payload: google.maps.MapMouseEvent) => any;
-    mouseover: (payload: google.maps.MapMouseEvent) => any;
-    mouseup: (payload: google.maps.MapMouseEvent) => 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<{
-    options?: Omit<google.maps.MarkerOptions, "map">;
+    /**
+     * The position of the marker on the map.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.position
+     */
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
+    /**
+     * Configuration options for the marker.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions
+     */
+    options?: Omit<google.maps.marker.AdvancedMarkerElementOptions, "map">;
 }> & Readonly<{
     onClick?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
-    onContextmenu?: ((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;
     onDragstart?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
-    onMousedown?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
-    onMouseout?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
-    onMouseover?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
-    onMouseup?: ((payload: google.maps.MapMouseEvent) => 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;
+    default?: () => any;
+    content?: () => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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;
@@ -12,26 +12,63 @@ export interface MarkerClustererOptions {
     renderer?: unknown;
     onClusterClick?: unknown;
 }
-export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
+export interface Cluster {
+    marker: google.maps.marker.AdvancedMarkerElement;
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    position: google.maps.LatLng;
+    bounds: google.maps.LatLngBounds | undefined;
+    count: number;
+}
+export interface ClusterStats {
+    markers: {
+        sum: number;
+    };
+    clusters: {
+        count: number;
+        markers: {
+            min: number;
+            max: number;
+            mean: number;
+            sum: number;
+        };
+    };
+}
+export interface MarkerClustererContext {
     markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
-}>;
+    /** Increments after each clustering cycle; watch to detect cluster membership changes */
+    clusteringVersion: ShallowRef<number>;
+}
+export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<MarkerClustererContext>;
 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;
     onClusteringbegin?: ((payload: MarkerClustererInstance) => any) | undefined;
     onClusteringend?: ((payload: MarkerClustererInstance) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
+    default?: () => any;
+    renderer?: (props: {
+        cluster: Cluster;
+        stats: ClusterStats;
+        map: google.maps.Map;
+    }) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,11 +1,6 @@
-<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 { getCurrentInstance, h, inject, onBeforeUnmount, provide, shallowRef, useSlots, render as vueRender, watch } from "vue";
+import { bindGoogleMapsEvents, MAP_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
 export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clusterer");
 </script>
 
@@ -13,50 +8,101 @@ export const MARKER_CLUSTERER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker-clu
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["click", "clusteringbegin", "clusteringend"]);
+defineSlots();
 const markerClustererEvents = [
   "click",
   "clusteringbegin",
   "clusteringend"
 ];
-const emit = defineEmits([]);
+const slots = useSlots();
+const instance = getCurrentInstance();
 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 clusteringVersion = shallowRef(0);
+const renderedContainers = [];
+function cleanupRenderedClusters() {
+  for (const container of renderedContainers) {
+    vueRender(null, container);
+  }
+  renderedContainers.length = 0;
+}
+onBeforeUnmount(cleanupRenderedClusters);
+const markerClusterer = useGoogleMapsResource({
+  async create({ map, mapsApi }) {
+    const { MarkerClusterer } = await import("@googlemaps/markerclusterer");
+    if (slots.renderer) {
+      await mapsApi.importLibrary("marker");
+    }
+    const clusterer = new MarkerClusterer({
+      map,
+      ...props.options,
+      ...slots.renderer ? {
+        renderer: {
+          render(cluster, stats) {
+            const container = document.createElement("div");
+            const vnode = h({
+              render: () => slots.renderer?.({ cluster, stats, map })
+            });
+            if (instance) {
+              vnode.appContext = instance.appContext;
+            }
+            vueRender(vnode, container);
+            renderedContainers.push(container);
+            const marker = new mapsApi.marker.AdvancedMarkerElement({
+              position: cluster.position,
+              content: container.firstElementChild || container
+            });
+            return marker;
+          }
+        }
+      } : {}
+    });
+    bindGoogleMapsEvents(clusterer, emit, { withPayload: markerClustererEvents });
+    clusterer.addListener("clusteringbegin", () => {
+      cleanupRenderedClusters();
+    });
+    clusterer.addListener("clusteringend", () => {
+      clusteringVersion.value++;
+    });
+    return clusterer;
+  },
+  cleanup(clusterer, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(clusterer);
+    clusterer.setMap(null);
+    cleanupRenderedClusters();
+  }
 });
-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;
+    if (!mapContext?.map.value?.getProjection())
+      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,
   {
     markerClusterer,
-    requestRerender
+    requestRerender,
+    clusteringVersion
   }
 );
-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;
@@ -12,26 +12,63 @@ export interface MarkerClustererOptions {
     renderer?: unknown;
     onClusterClick?: unknown;
 }
-export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<{
+export interface Cluster {
+    marker: google.maps.marker.AdvancedMarkerElement;
+    markers?: google.maps.marker.AdvancedMarkerElement[];
+    position: google.maps.LatLng;
+    bounds: google.maps.LatLngBounds | undefined;
+    count: number;
+}
+export interface ClusterStats {
+    markers: {
+        sum: number;
+    };
+    clusters: {
+        count: number;
+        markers: {
+            min: number;
+            max: number;
+            mean: number;
+            sum: number;
+        };
+    };
+}
+export interface MarkerClustererContext {
     markerClusterer: ShallowRef<MarkerClustererInstance | undefined>;
     requestRerender: () => void;
-}>;
+    /** Increments after each clustering cycle; watch to detect cluster membership changes */
+    clusteringVersion: ShallowRef<number>;
+}
+export declare const MARKER_CLUSTERER_INJECTION_KEY: InjectionKey<MarkerClustererContext>;
 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;
     onClusteringbegin?: ((payload: MarkerClustererInstance) => any) | undefined;
     onClusteringend?: ((payload: MarkerClustererInstance) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
+    default?: () => any;
+    renderer?: (props: {
+        cluster: Cluster;
+        stats: ClusterStats;
+        map: google.maps.Map;
+    }) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,77 @@
+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;
+    /**
+     * 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
+     */
+    hideWhenClustered?: boolean;
+};
+type __VLS_Slots = {
+    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>;
+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,223 @@
+<script setup>
+import { computed, inject, ref, useTemplateRef, watch } from "vue";
+import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
+import { MARKER_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
+defineOptions({
+  inheritAttrs: false
+});
+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 },
+  panOnOpen: { type: [Boolean, Number], required: false, default: true },
+  hideWhenClustered: { type: Boolean, required: false, default: true }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: void 0 } });
+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;
+    }
+  }
+  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 isPositioned = ref(false);
+const dataState = computed(() => isPositioned.value ? "open" : "closed");
+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)
+    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);
+}
+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);
+          });
+        }
+      }
+      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;
+      }
+      onRemove() {
+        el.parentNode?.removeChild(el);
+      }
+    }
+    el.style.visibility = "hidden";
+    el.style.pointerEvents = "none";
+    const ov = new CustomOverlay();
+    ov.setMap(map);
+    if (markerContext?.advancedMarkerElement.value) {
+      const ame = markerContext.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 (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;
+    },
+    () => {
+      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);
+  }
+});
+if (markerClustererContext && markerContext) {
+  watch(
+    () => markerClustererContext.clusteringVersion.value,
+    () => {
+      if (!props.hideWhenClustered || open.value === false)
+        return;
+      const clusterer = markerClustererContext.markerClusterer.value;
+      if (!clusterer?.clusters)
+        return;
+      const parentMarker = markerContext.advancedMarkerElement.value;
+      if (!parentMarker)
+        return;
+      const isClustered = clusterer.clusters.some(
+        (cluster) => cluster.count > 1 && cluster.markers?.includes(parentMarker)
+      );
+      if (isClustered)
+        open.value = false;
+    }
+  );
+}
+defineExpose({ overlay, dataState });
+</script>
+
+<template>
+  <div style="display: none;">
+    <div ref="overlay-content" :data-state="dataState" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>