@nuxt/scripts 1.0.0-beta.27 → 1.0.0-beta.28

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

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    src: string | object;
+    style?: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    contextmenu: (payload: google.maps.Data.MouseEvent) => any;
+    click: (payload: google.maps.Data.MouseEvent) => any;
+    dblclick: (payload: google.maps.Data.MouseEvent) => any;
+    mousedown: (payload: google.maps.Data.MouseEvent) => any;
+    mousemove: (payload: google.maps.Data.MouseEvent) => any;
+    mouseout: (payload: google.maps.Data.MouseEvent) => any;
+    mouseover: (payload: google.maps.Data.MouseEvent) => any;
+    mouseup: (payload: google.maps.Data.MouseEvent) => any;
+    addfeature: (payload: google.maps.Data.AddFeatureEvent) => any;
+    removefeature: (payload: google.maps.Data.RemoveFeatureEvent) => any;
+    setgeometry: (payload: google.maps.Data.SetGeometryEvent) => any;
+    setproperty: (payload: google.maps.Data.SetPropertyEvent) => any;
+    removeproperty: (payload: google.maps.Data.RemovePropertyEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onContextmenu?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onDblclick?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMousedown?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMousemove?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseout?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseover?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseup?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onAddfeature?: ((payload: google.maps.Data.AddFeatureEvent) => any) | undefined;
+    onRemovefeature?: ((payload: google.maps.Data.RemoveFeatureEvent) => any) | undefined;
+    onSetgeometry?: ((payload: google.maps.Data.SetGeometryEvent) => any) | undefined;
+    onSetproperty?: ((payload: google.maps.Data.SetPropertyEvent) => any) | undefined;
+    onRemoveproperty?: ((payload: google.maps.Data.RemovePropertyEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,68 @@
+<script setup>
+import { watch } from "vue";
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+const props = defineProps({
+  src: { type: [String, Object], required: true },
+  style: { type: null, required: false }
+});
+const emit = defineEmits(["addfeature", "removefeature", "setgeometry", "setproperty", "removeproperty"]);
+const dataEvents = [
+  "click",
+  "contextmenu",
+  "dblclick",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup"
+];
+const featureEvents = [
+  "addfeature",
+  "removefeature",
+  "setgeometry",
+  "setproperty",
+  "removeproperty"
+];
+function loadGeoJson(src, layer) {
+  if (typeof src === "string")
+    layer.loadGeoJson(src);
+  else
+    layer.addGeoJson(src);
+}
+const dataLayer = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const layer = new mapsApi.Data({ map });
+    if (props.style)
+      layer.setStyle(props.style);
+    loadGeoJson(props.src, layer);
+    setupEventListeners(layer);
+    return layer;
+  },
+  cleanup(layer, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(layer);
+    layer.setMap(null);
+  }
+});
+watch(() => props.src, (src) => {
+  if (!dataLayer.value)
+    return;
+  dataLayer.value.forEach((feature) => dataLayer.value.remove(feature));
+  loadGeoJson(src, dataLayer.value);
+});
+watch(() => props.style, (style) => {
+  if (dataLayer.value)
+    dataLayer.value.setStyle(style ?? {});
+}, { deep: true });
+function setupEventListeners(layer) {
+  dataEvents.forEach((event) => {
+    layer.addListener(event, (payload) => emit(event, payload));
+  });
+  featureEvents.forEach((event) => {
+    layer.addListener(event, (payload) => emit(event, payload));
+  });
+}
+</script>
+
+<template>
+
+</template>

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

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    src: string | object;
+    style?: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    contextmenu: (payload: google.maps.Data.MouseEvent) => any;
+    click: (payload: google.maps.Data.MouseEvent) => any;
+    dblclick: (payload: google.maps.Data.MouseEvent) => any;
+    mousedown: (payload: google.maps.Data.MouseEvent) => any;
+    mousemove: (payload: google.maps.Data.MouseEvent) => any;
+    mouseout: (payload: google.maps.Data.MouseEvent) => any;
+    mouseover: (payload: google.maps.Data.MouseEvent) => any;
+    mouseup: (payload: google.maps.Data.MouseEvent) => any;
+    addfeature: (payload: google.maps.Data.AddFeatureEvent) => any;
+    removefeature: (payload: google.maps.Data.RemoveFeatureEvent) => any;
+    setgeometry: (payload: google.maps.Data.SetGeometryEvent) => any;
+    setproperty: (payload: google.maps.Data.SetPropertyEvent) => any;
+    removeproperty: (payload: google.maps.Data.RemovePropertyEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onContextmenu?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onClick?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onDblclick?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMousedown?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMousemove?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseout?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseover?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onMouseup?: ((payload: google.maps.Data.MouseEvent) => any) | undefined;
+    onAddfeature?: ((payload: google.maps.Data.AddFeatureEvent) => any) | undefined;
+    onRemovefeature?: ((payload: google.maps.Data.RemoveFeatureEvent) => any) | undefined;
+    onSetgeometry?: ((payload: google.maps.Data.SetGeometryEvent) => any) | undefined;
+    onSetproperty?: ((payload: google.maps.Data.SetPropertyEvent) => any) | undefined;
+    onRemoveproperty?: ((payload: google.maps.Data.RemovePropertyEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -8,23 +8,23 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     visible: () => any;
-    position_changed: () => any;
-    zindex_changed: () => any;
     closeclick: () => any;
     content_changed: () => any;
     domready: () => any;
     headercontent_changed: () => any;
     headerdisabled_changed: () => any;
+    position_changed: () => any;
+    zindex_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
     onVisible?: (() => any) | undefined;
-    onPosition_changed?: (() => any) | undefined;
-    onZindex_changed?: (() => any) | undefined;
     onCloseclick?: (() => any) | undefined;
     onContent_changed?: (() => any) | undefined;
     onDomready?: (() => any) | undefined;
     onHeadercontent_changed?: (() => any) | undefined;
     onHeaderdisabled_changed?: (() => any) | undefined;
+    onPosition_changed?: (() => any) | undefined;
+    onZindex_changed?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,5 +1,6 @@
 <script setup>
 import { inject, useTemplateRef, watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
 import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY, MARKER_INJECTION_KEY } from "./injectionKeys";
 import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
@@ -28,7 +29,7 @@ const infoWindow = useGoogleMapsResource({
       content: infoWindowContainer.value,
       ...props.options
     });
-    setupEventListeners(iw);
+    bindGoogleMapsEvents(iw, emit, { noPayload: infoWindowEvents });
     if (markerContext?.marker.value) {
       markerClickListener = markerContext.marker.value.addListener("click", () => {
         iw.open({
@@ -61,11 +62,6 @@ watch(() => props.options, (options) => {
     infoWindow.value.setOptions(options);
   }
 }, { deep: true });
-function setupEventListeners(iw) {
-  infoWindowEvents.forEach((event) => {
-    iw.addListener(event, () => emit(event));
-  });
-}
 </script>
 
 <template>

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

@@ -8,23 +8,23 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     visible: () => any;
-    position_changed: () => any;
-    zindex_changed: () => any;
     closeclick: () => any;
     content_changed: () => any;
     domready: () => any;
     headercontent_changed: () => any;
     headerdisabled_changed: () => any;
+    position_changed: () => any;
+    zindex_changed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: (() => any) | undefined;
     onVisible?: (() => any) | undefined;
-    onPosition_changed?: (() => any) | undefined;
-    onZindex_changed?: (() => any) | undefined;
     onCloseclick?: (() => any) | undefined;
     onContent_changed?: (() => any) | undefined;
     onDomready?: (() => any) | undefined;
     onHeadercontent_changed?: (() => any) | undefined;
     onHeaderdisabled_changed?: (() => any) | undefined;
+    onPosition_changed?: (() => any) | undefined;
+    onZindex_changed?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -2,6 +2,7 @@ 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<{
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
     options?: Omit<google.maps.MarkerOptions, "map">;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     contextmenu: (payload: google.maps.MapMouseEvent) => any;
@@ -14,18 +15,19 @@ 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<{
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
     options?: Omit<google.maps.MarkerOptions, "map">;
 }> & Readonly<{
     onContextmenu?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
@@ -38,17 +40,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/ScriptGoogleMapsMarker.vue

@@ -1,5 +1,6 @@
 <script>
 import { inject, provide, watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
 import { MARKER_INJECTION_KEY } from "./injectionKeys";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
 import { useGoogleMapsResource } from "./useGoogleMapsResource";
@@ -8,9 +9,13 @@ export { MARKER_INJECTION_KEY } from "./injectionKeys";
 
 <script setup>
 const props = defineProps({
+  position: { type: null, required: false },
   options: { type: Object, required: false }
 });
 const emit = defineEmits([]);
+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,8 +44,14 @@ const eventsWithMapMouseEventPayload = [
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
 const marker = useGoogleMapsResource({
   create({ mapsApi, map }) {
-    const m = new mapsApi.Marker(props.options);
-    setupEventListeners(m);
+    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();
@@ -59,20 +70,17 @@ const marker = useGoogleMapsResource({
     }
   }
 });
+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 setupEventListeners(m) {
-  eventsWithoutPayload.forEach((event) => {
-    m.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    m.addListener(event, (payload) => emit(event, payload));
-  });
-}
 </script>
 
 <template>

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

@@ -2,6 +2,7 @@ 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<{
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
     options?: Omit<google.maps.MarkerOptions, "map">;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     contextmenu: (payload: google.maps.MapMouseEvent) => any;
@@ -14,18 +15,19 @@ 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<{
+    position?: google.maps.LatLngLiteral | google.maps.LatLng;
     options?: Omit<google.maps.MarkerOptions, "map">;
 }> & Readonly<{
     onContextmenu?: ((payload: google.maps.MapMouseEvent) => any) | undefined;
@@ -38,17 +40,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/ScriptGoogleMapsOverlayView.d.vue.ts

@@ -0,0 +1,40 @@
+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 = {
+    position?: google.maps.LatLngLiteral;
+    anchor?: OverlayAnchor;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    pane?: OverlayPane;
+    zIndex?: number;
+    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 | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => 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,168 @@
+<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 });
+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, () => {
+  if (overlay.value) {
+    const map = overlay.value.getMap();
+    overlay.value.setMap(null);
+    if (map)
+      overlay.value.setMap(map);
+  }
+});
+watch(() => 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,40 @@
+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 = {
+    position?: google.maps.LatLngLiteral;
+    anchor?: OverlayAnchor;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    pane?: OverlayPane;
+    zIndex?: number;
+    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 | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => 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/ScriptGoogleMapsPolygon.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { watch } from "vue";
+import { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
 import { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
@@ -23,7 +24,9 @@ const eventsWithMapMouseEventPayload = [
 const polygon = useGoogleMapsResource({
   create({ mapsApi, map }) {
     const p = new mapsApi.Polygon({ map, ...props.options });
-    setupEventListeners(p);
+    bindGoogleMapsEvents(p, emit, {
+      withPayload: [...eventsWithPolyMouseEventPayload, ...eventsWithMapMouseEventPayload]
+    });
     return p;
   },
   cleanup(p, { mapsApi }) {
@@ -36,14 +39,6 @@ watch(() => props.options, (options) => {
     polygon.value.setOptions(options);
   }
 }, { deep: true });
-function setupEventListeners(p) {
-  eventsWithPolyMouseEventPayload.forEach((event) => {
-    p.addListener(event, (payload) => emit(event, payload));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    p.addListener(event, (payload) => emit(event, payload));
-  });
-}
 </script>
 
 <template>