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

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

@@ -0,0 +1,43 @@
+type __VLS_Props = {
+    /**
+     * The GeoJSON source. Can be a URL string or a GeoJSON object.
+     * @see https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
+     */
+    src: string | object;
+    /**
+     * Styling options or a function that computes styles per feature.
+     * @see https://developers.google.com/maps/documentation/javascript/datalayer#style_geojson_data
+     */
+    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/ScriptGoogleMapsHeatmapLayer.d.vue.ts

@@ -1,4 +1,8 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the heatmap layer visualization.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions
+     */
     options?: Omit<google.maps.visualization.HeatmapLayerOptions, '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/ScriptGoogleMapsHeatmapLayer.vue

@@ -1,32 +1,28 @@
-<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 { useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let heatmapLayer = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => {
-  await mapContext.mapsApi.value.importLibrary("visualization");
-  heatmapLayer = new mapContext.mapsApi.value.visualization.HeatmapLayer({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  whenever(() => props.options, (options) => {
-    heatmapLayer?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  heatmapLayer?.setMap(null);
+const heatmapLayer = useGoogleMapsResource({
+  async create({ mapsApi, map }) {
+    await mapsApi.importLibrary("visualization");
+    return new mapsApi.visualization.HeatmapLayer({
+      map,
+      ...props.options
+    });
+  },
+  cleanup(layer) {
+    layer.setMap(null);
+  }
 });
+watch(() => props.options, (options) => {
+  if (heatmapLayer.value && options) {
+    heatmapLayer.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

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

@@ -1,4 +1,8 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the heatmap layer visualization.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions
+     */
     options?: Omit<google.maps.visualization.HeatmapLayerOptions, '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/ScriptGoogleMapsInfoWindow.d.vue.ts

@@ -1,30 +1,34 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the info window.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions
+     */
     options?: google.maps.InfoWindowOptions;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+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,20 +1,10 @@
-<template>
-  <div class="info-window-container">
-    <div ref="info-window-container">
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { inject, onUnmounted, useTemplateRef } from "vue";
-import { whenever } from "@vueuse/core";
-import { MARKER_INJECTION_KEY } from "./ScriptGoogleMapsMarker.vue";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
-import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./ScriptGoogleMapsAdvancedMarkerElement.vue";
+import { inject, useTemplateRef, watch } from "vue";
+import { bindGoogleMapsEvents, MAP_INJECTION_KEY, MARKER_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: null, required: false }
 });
+const emit = defineEmits(["close", "closeclick", "content_changed", "domready", "headercontent_changed", "headerdisabled_changed", "position_changed", "visible", "zindex_changed"]);
 const infoWindowEvents = [
   "close",
   "closeclick",
@@ -26,63 +16,72 @@ const infoWindowEvents = [
   "visible",
   "zindex_changed"
 ];
-const emit = defineEmits([]);
 const mapContext = inject(MAP_INJECTION_KEY, void 0);
 const markerContext = inject(MARKER_INJECTION_KEY, void 0);
-const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, void 0);
 const infoWindowContainer = useTemplateRef("info-window-container");
-let infoWindow = void 0;
-whenever(
-  () => mapContext?.map.value && mapContext.mapsApi.value && infoWindowContainer.value,
-  () => {
-    infoWindow = new mapContext.mapsApi.value.InfoWindow({
+let gmpClickHandler;
+let isOpen = false;
+const infoWindow = useGoogleMapsResource({
+  ready: () => !!infoWindowContainer.value,
+  create({ mapsApi, map }) {
+    const iw = new mapsApi.InfoWindow({
       content: infoWindowContainer.value,
       ...props.options
     });
-    setupInfoWindowEventListeners(infoWindow);
-    if (markerContext?.marker.value) {
-      markerContext.marker.value.addListener("click", () => {
-        infoWindow.open({
-          anchor: markerContext.marker.value,
-          map: mapContext.map.value
-        });
-      });
-    } else if (advancedMarkerElementContext?.advancedMarkerElement.value) {
-      advancedMarkerElementContext.advancedMarkerElement.value.addListener("click", () => {
-        infoWindow.open({
-          anchor: advancedMarkerElementContext.advancedMarkerElement.value,
-          map: mapContext.map.value
-        });
-      });
+    iw.addListener("closeclick", () => {
+      isOpen = false;
+    });
+    iw.addListener("close", () => {
+      isOpen = false;
+    });
+    bindGoogleMapsEvents(iw, emit, { noPayload: infoWindowEvents });
+    const toggleOpen = (anchor) => {
+      if (isOpen) {
+        iw.close();
+        isOpen = false;
+      } else {
+        mapContext?.activateInfoWindow(iw);
+        iw.open({ anchor, map });
+        isOpen = true;
+      }
+    };
+    if (markerContext?.advancedMarkerElement.value) {
+      const ame = markerContext.advancedMarkerElement.value;
+      ame.gmpClickable = true;
+      gmpClickHandler = () => toggleOpen(ame);
+      ame.addEventListener("gmp-click", gmpClickHandler);
     } else {
-      infoWindow.setPosition(props.options?.position);
-      infoWindow.open(mapContext.map.value);
+      iw.setPosition(props.options?.position);
+      iw.open(map);
+      isOpen = true;
     }
-    whenever(() => props.options, (options) => {
-      infoWindow?.setOptions(options);
-    }, {
-      deep: true
-    });
+    return iw;
   },
-  {
-    immediate: true,
-    once: true
-  }
-);
-onUnmounted(() => {
-  if (!infoWindow || !mapContext?.mapsApi.value) {
-    return;
+  cleanup(iw, { mapsApi }) {
+    if (gmpClickHandler && markerContext?.advancedMarkerElement.value) {
+      markerContext.advancedMarkerElement.value.removeEventListener("gmp-click", gmpClickHandler);
+      gmpClickHandler = void 0;
+    }
+    mapsApi.event.clearInstanceListeners(iw);
+    iw.close();
+    isOpen = false;
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(infoWindow);
-  infoWindow.close();
 });
-function setupInfoWindowEventListeners(infoWindow2) {
-  infoWindowEvents.forEach((event) => {
-    infoWindow2.addListener(event, () => emit(event));
-  });
-}
+watch(() => props.options, (options) => {
+  if (infoWindow.value && options) {
+    infoWindow.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
 
+<template>
+  <div class="info-window-container">
+    <div ref="info-window-container">
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .info-window-container{display:none}
 </style>

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

@@ -1,30 +1,34 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the info window.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions
+     */
     options?: google.maps.InfoWindowOptions;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+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

@@ -1,58 +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>, {
+    content?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,85 +1,81 @@
-<template>
-  <slot v-if="marker" />
-</template>
-
 <script>
-import { inject, onUnmounted, provide, shallowRef } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { inject, provide, useSlots, useTemplateRef, watch } from "vue";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const MARKER_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
+import { bindGoogleMapsEvents, MARKER_INJECTION_KEY, useGoogleMapsResource } from "./useGoogleMapsResource";
+export { MARKER_INJECTION_KEY } from "./useGoogleMapsResource";
 </script>
 
 <script setup>
 const props = defineProps({
+  position: { type: null, required: false },
   options: { type: Object, required: false }
 });
-const eventsWithoutPayload = [
-  "animation_changed",
-  "clickable_changed",
-  "cursor_changed",
-  "draggable_changed",
-  "flat_changed",
-  "icon_changed",
-  "position_changed",
-  "shape_changed",
-  "title_changed",
-  "visible_changed",
-  "zindex_changed"
-];
-const eventsWithMapMouseEventPayload = [
-  "click",
-  "contextmenu",
-  "dblclick",
-  "drag",
-  "dragend",
-  "dragstart",
-  "mousedown",
-  "mouseout",
-  "mouseover",
-  "mouseup"
-];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
+const emit = defineEmits(["click", "drag", "dragend", "dragstart"]);
+const dragEvents = ["drag", "dragend", "dragstart"];
+const slots = useSlots();
+const markerContent = useTemplateRef("marker-content");
 const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, void 0);
-const marker = shallowRef(void 0);
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  marker.value = new mapContext.mapsApi.value.Marker(props.options);
-  setupMarkerEventListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(mapContext.map.value);
+let gmpClickHandler;
+const advancedMarkerElement = useGoogleMapsResource({
+  ready: () => !slots.content || !!markerContent.value,
+  async create({ mapsApi, map }) {
+    await mapsApi.importLibrary("marker");
+    const marker = new mapsApi.marker.AdvancedMarkerElement({
+      ...props.options,
+      gmpClickable: true,
+      ...props.position ? { position: props.position } : {}
+    });
+    if (markerContent.value) {
+      marker.content = markerContent.value;
+    }
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.addMarker(marker, true);
+      markerClustererContext.requestRerender();
+    } else {
+      marker.map = map;
+    }
+    gmpClickHandler = (e) => emit("click", e);
+    marker.addEventListener("gmp-click", gmpClickHandler);
+    bindGoogleMapsEvents(marker, emit, {
+      withPayload: dragEvents
+    });
+    return marker;
+  },
+  cleanup(marker, { mapsApi }) {
+    if (gmpClickHandler) {
+      marker.removeEventListener("gmp-click", gmpClickHandler);
+      gmpClickHandler = void 0;
+    }
+    mapsApi.event.clearInstanceListeners(marker);
+    if (markerClustererContext?.markerClusterer.value) {
+      markerClustererContext.markerClusterer.value.removeMarker(marker, true);
+      markerClustererContext.requestRerender();
+    } else {
+      marker.map = null;
+    }
   }
-  whenever(() => props.options, (options) => {
-    marker.value?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
 });
-onUnmounted(() => {
-  if (!marker.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(marker.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.removeMarker(marker.value, true);
-    markerClustererContext.requestRerender();
-  } else {
-    marker.value.setMap(null);
-  }
-});
-provide(MARKER_INJECTION_KEY, { marker });
-function setupMarkerEventListeners(marker2) {
-  eventsWithoutPayload.forEach((event) => {
-    marker2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    marker2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(
+  () => [props.position, props.options],
+  () => {
+    if (!advancedMarkerElement.value)
+      return;
+    if (props.options)
+      Object.assign(advancedMarkerElement.value, props.options);
+    advancedMarkerElement.value.position = props.position ?? props.options?.position;
+  },
+  { deep: true }
+);
+provide(MARKER_INJECTION_KEY, { advancedMarkerElement });
 </script>
+
+<template>
+  <!-- Hidden container for #content slot — becomes the marker visual -->
+  <div v-if="$slots.content" style="display: none;">
+    <div ref="marker-content">
+      <slot name="content" />
+    </div>
+  </div>
+  <!-- Default slot for child components (InfoWindow, OverlayView, etc.) -->
+  <slot v-if="advancedMarkerElement" />
+</template>