@nuxt/scripts 1.0.0-beta.6 → 1.0.0-rc.1

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

@@ -0,0 +1,78 @@
+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>;
+    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/ScriptGoogleMapsPinElement.d.vue.ts

@@ -1,6 +1,13 @@
-type __VLS_Props = {
-    options?: Omit<google.maps.marker.PinElementOptions, 'map'>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-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>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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.vue

@@ -1,43 +1,11 @@
-<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";
-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);
-    if (advancedMarkerElementContext?.advancedMarkerElement.value) {
-      advancedMarkerElementContext.advancedMarkerElement.value.content = pinElement.value.element;
-    }
-    whenever(() => props.options, (options) => {
-      if (pinElement.value && options) {
-        Object.assign(pinElement.value, options);
-      }
-    }, {
-      deep: true
-    });
-  },
-  {
-    immediate: true,
-    once: true
-  }
-);
-onUnmounted(() => {
-  if (advancedMarkerElementContext?.advancedMarkerElement.value && pinElement.value) {
-    advancedMarkerElementContext.advancedMarkerElement.value.content = null;
-  }
-  pinElement.value = void 0;
-});
+if (import.meta.dev) {
+  console.warn(
+    "[nuxt-scripts] <ScriptGoogleMapsPinElement> was removed in v1. Use the #content slot on <ScriptGoogleMapsMarker> instead. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1"
+  );
+}
 </script>
+
+<template>
+  <slot />
+</template>

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

@@ -1,6 +1,13 @@
-type __VLS_Props = {
-    options?: Omit<google.maps.marker.PinElementOptions, 'map'>;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-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>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/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,10 @@
-<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, 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 +20,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,10 @@
-<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, 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 +20,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,10 @@
-<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, 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 +21,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;