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

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsOverlayView.vue.d.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_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;
+    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/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>;

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

@@ -1,43 +1,34 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted, shallowRef } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
-import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./ScriptGoogleMapsAdvancedMarkerElement.vue";
+import { inject, watch } from "vue";
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./injectionKeys";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, void 0);
-const pinElement = shallowRef(void 0);
-whenever(
-  () => mapContext?.map.value && mapContext.mapsApi.value && advancedMarkerElementContext?.advancedMarkerElement.value,
-  async () => {
-    await mapContext.mapsApi.value.importLibrary("marker");
-    pinElement.value = new mapContext.mapsApi.value.marker.PinElement(props.options);
+const pinElement = useGoogleMapsResource({
+  ready: () => !!advancedMarkerElementContext?.advancedMarkerElement.value,
+  async create({ mapsApi }) {
+    await mapsApi.importLibrary("marker");
+    const pin = new mapsApi.marker.PinElement(props.options);
     if (advancedMarkerElementContext?.advancedMarkerElement.value) {
-      advancedMarkerElementContext.advancedMarkerElement.value.content = pinElement.value.element;
+      advancedMarkerElementContext.advancedMarkerElement.value.content = pin.element;
     }
-    whenever(() => props.options, (options) => {
-      if (pinElement.value && options) {
-        Object.assign(pinElement.value, options);
-      }
-    }, {
-      deep: true
-    });
+    return pin;
   },
-  {
-    immediate: true,
-    once: true
-  }
-);
-onUnmounted(() => {
-  if (advancedMarkerElementContext?.advancedMarkerElement.value && pinElement.value) {
-    advancedMarkerElementContext.advancedMarkerElement.value.content = null;
+  cleanup() {
+    if (advancedMarkerElementContext?.advancedMarkerElement.value) {
+      advancedMarkerElementContext.advancedMarkerElement.value.content = null;
+    }
   }
-  pinElement.value = void 0;
 });
+watch(() => props.options, (options) => {
+  if (pinElement.value && options) {
+    Object.assign(pinElement.value, options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsPinElement.vue.d.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>;

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the polygon overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions
+     */
     options?: Omit<google.maps.PolygonOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.PolyMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.PolyMouseEvent) => any;
+    click: (payload: google.maps.PolyMouseEvent) => any;
     dblclick: (payload: google.maps.PolyMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -14,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseover: (payload: google.maps.PolyMouseEvent) => any;
     mouseup: (payload: google.maps.PolyMouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

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

@@ -1,14 +1,11 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["click", "contextmenu", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "drag", "dragend", "dragstart"]);
 const eventsWithPolyMouseEventPayload = [
   "click",
   "contextmenu",
@@ -24,37 +21,26 @@ const eventsWithMapMouseEventPayload = [
   "dragend",
   "dragstart"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let polygon = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  polygon = new mapContext.mapsApi.value.Polygon({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupPolygonEventListeners(polygon);
-  whenever(() => props.options, (options) => {
-    polygon?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!polygon || !mapContext?.mapsApi.value) {
-    return;
+const polygon = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const p = new mapsApi.Polygon({ map, ...props.options });
+    bindGoogleMapsEvents(p, emit, {
+      withPayload: [...eventsWithPolyMouseEventPayload, ...eventsWithMapMouseEventPayload]
+    });
+    return p;
+  },
+  cleanup(p, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(p);
+    p.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(polygon);
-  polygon.setMap(null);
 });
-function setupPolygonEventListeners(polygon2) {
-  eventsWithPolyMouseEventPayload.forEach((event) => {
-    polygon2.addListener(event, (payload) => emit(event, payload));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    polygon2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (polygon.value && options) {
+    polygon.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the polygon overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions
+     */
     options?: Omit<google.maps.PolygonOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.PolyMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.PolyMouseEvent) => any;
+    click: (payload: google.maps.PolyMouseEvent) => any;
     dblclick: (payload: google.maps.PolyMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -14,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseover: (payload: google.maps.PolyMouseEvent) => any;
     mouseup: (payload: google.maps.PolyMouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the polyline overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions
+     */
     options?: Omit<google.maps.PolylineOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.PolyMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.PolyMouseEvent) => any;
+    click: (payload: google.maps.PolyMouseEvent) => any;
     dblclick: (payload: google.maps.PolyMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -14,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseover: (payload: google.maps.PolyMouseEvent) => any;
     mouseup: (payload: google.maps.PolyMouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

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

@@ -1,14 +1,11 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["click", "contextmenu", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "drag", "dragend", "dragstart"]);
 const eventsWithPolyMouseEventPayload = [
   "click",
   "contextmenu",
@@ -24,37 +21,26 @@ const eventsWithMapMouseEventPayload = [
   "dragend",
   "dragstart"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let polyline = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  polyline = new mapContext.mapsApi.value.Polyline({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupPolylineEventListeners(polyline);
-  whenever(() => props.options, (options) => {
-    polyline?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!polyline || !mapContext?.mapsApi.value) {
-    return;
+const polyline = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const p = new mapsApi.Polyline({ map, ...props.options });
+    bindGoogleMapsEvents(p, emit, {
+      withPayload: [...eventsWithPolyMouseEventPayload, ...eventsWithMapMouseEventPayload]
+    });
+    return p;
+  },
+  cleanup(p, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(p);
+    p.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(polyline);
-  polyline.setMap(null);
 });
-function setupPolylineEventListeners(polyline2) {
-  eventsWithPolyMouseEventPayload.forEach((event) => {
-    polyline2.addListener(event, (payload) => emit(event, payload));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    polyline2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (polyline.value && options) {
+    polyline.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the polyline overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions
+     */
     options?: Omit<google.maps.PolylineOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.PolyMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     contextmenu: (payload: google.maps.PolyMouseEvent) => any;
+    click: (payload: google.maps.PolyMouseEvent) => any;
     dblclick: (payload: google.maps.PolyMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;
     dragend: (payload: google.maps.MapMouseEvent) => any;
@@ -14,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseover: (payload: google.maps.PolyMouseEvent) => any;
     mouseup: (payload: google.maps.PolyMouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onContextmenu?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDblclick?: ((payload: google.maps.PolyMouseEvent) => any) | undefined;
     onDrag?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
     onDragend?: ((payload: google.maps.MapMouseEvent) => any) | undefined;

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the rectangle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions
+     */
     options?: Omit<google.maps.RectangleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.MapMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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;
@@ -15,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseup: (payload: google.maps.MapMouseEvent) => any;
     bounds_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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;

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

@@ -1,14 +1,11 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["bounds_changed", "click", "contextmenu", "dblclick", "drag", "dragend", "dragstart", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"]);
 const eventsWithoutPayload = [
   "bounds_changed"
 ];
@@ -25,37 +22,27 @@ const eventsWithMapMouseEventPayload = [
   "mouseover",
   "mouseup"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let rectangle = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  rectangle = new mapContext.mapsApi.value.Rectangle({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupRectangleEventListeners(rectangle);
-  whenever(() => props.options, (options) => {
-    rectangle?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!rectangle || !mapContext?.mapsApi.value) {
-    return;
+const rectangle = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const r = new mapsApi.Rectangle({ map, ...props.options });
+    bindGoogleMapsEvents(r, emit, {
+      noPayload: eventsWithoutPayload,
+      withPayload: eventsWithMapMouseEventPayload
+    });
+    return r;
+  },
+  cleanup(r, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(r);
+    r.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(rectangle);
-  rectangle.setMap(null);
 });
-function setupRectangleEventListeners(rectangle2) {
-  eventsWithoutPayload.forEach((event) => {
-    rectangle2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    rectangle2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (rectangle.value && options) {
+    rectangle.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

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

@@ -1,9 +1,13 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the rectangle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions
+     */
     options?: Omit<google.maps.RectangleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (payload: google.maps.MapMouseEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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;
@@ -15,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     mouseup: (payload: google.maps.MapMouseEvent) => any;
     bounds_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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;

package/dist/runtime/components/GoogleMaps/bindGoogleMapsEvents.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Bind Google Maps event listeners that forward to Vue emit.
+ *
+ * Two categories:
+ * - `noPayload`: emits with no arguments (state-change events like `position_changed`)
+ * - `withPayload`: forwards the first argument from the listener (mouse events, etc.)
+ */
+export declare function bindGoogleMapsEvents(instance: {
+    addListener: (event: string, handler: (...args: any[]) => void) => void;
+}, emit: (...args: any[]) => void, config: {
+    noPayload?: readonly string[];
+    withPayload?: readonly string[];
+}): void;

package/dist/runtime/components/GoogleMaps/bindGoogleMapsEvents.js

@@ -0,0 +1,8 @@
+export function bindGoogleMapsEvents(instance, emit, config) {
+  config.noPayload?.forEach((event) => {
+    instance.addListener(event, () => emit(event));
+  });
+  config.withPayload?.forEach((event) => {
+    instance.addListener(event, (payload) => emit(event, payload));
+  });
+}

package/dist/runtime/components/GoogleMaps/injectionKeys.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue';
+export declare const MAP_INJECTION_KEY: InjectionKey<{
+    map: ShallowRef<google.maps.Map | undefined>;
+    mapsApi: Ref<typeof google.maps | undefined>;
+    /** Close the previously active InfoWindow and register a new one as active */
+    activateInfoWindow: (iw: google.maps.InfoWindow) => void;
+}>;
+export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
+    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
+}>;
+export declare const MARKER_INJECTION_KEY: InjectionKey<{
+    marker: ShallowRef<google.maps.Marker | undefined>;
+}>;

package/dist/runtime/components/GoogleMaps/injectionKeys.js

@@ -0,0 +1,3 @@
+export const MAP_INJECTION_KEY = Symbol("map");
+export const ADVANCED_MARKER_ELEMENT_INJECTION_KEY = Symbol("marker");
+export const MARKER_INJECTION_KEY = Symbol("marker");

package/dist/runtime/components/GoogleMaps/useGoogleMapsResource.d.ts

@@ -0,0 +1,26 @@
+import type { ShallowRef } from 'vue';
+export interface GoogleMapsResourceContext {
+    map: google.maps.Map;
+    mapsApi: typeof google.maps;
+}
+/**
+ * Composable for safely managing Google Maps resource lifecycle.
+ *
+ * Handles the common pattern: wait for map readiness → async create → cleanup on unmount.
+ *
+ * Safety guarantees:
+ * - No watchers created after `await` (prevents orphaned watchers that leak memory)
+ * - Unmount guard prevents resource creation after component unmount
+ * - Resources created during the async gap are immediately cleaned up
+ * - Resource ref is always nulled on unmount to allow GC
+ */
+export declare function useGoogleMapsResource<T>({ ready, create, cleanup, }: {
+    /** Additional readiness condition beyond map + mapsApi being available */
+    ready?: () => boolean;
+    /** Create the Google Maps resource. Receives map context snapshot. May be async. */
+    create: (ctx: GoogleMapsResourceContext) => Promise<T> | T;
+    /** Clean up the resource. Called on unmount, or immediately if resource was created after unmount. */
+    cleanup?: (resource: T, ctx: {
+        mapsApi: typeof google.maps;
+    }) => void;
+}): ShallowRef<T | undefined>;