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

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

@@ -17,12 +17,9 @@ export interface PlaceholderOptions {
     key?: string;
     signature?: string;
 }
-import type { HTMLAttributes, ImgHTMLAttributes, InjectionKey, Ref, ReservedProps, ShallowRef } from 'vue';
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
-export declare const MAP_INJECTION_KEY: InjectionKey<{
-    map: ShallowRef<google.maps.Map | undefined>;
-    mapsApi: Ref<typeof google.maps | undefined>;
-}>;
+import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps, ShallowRef } from 'vue';
+export { MAP_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -43,6 +40,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * A latitude / longitude of where to focus the map.
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
+    /**
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
+     */
+    zoom?: number;
     /**
      * Should a marker be displayed on the map where the centre is.
      */
@@ -107,7 +109,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
     readonly map: ShallowRef<google.maps.Map | undefined>;
     readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-    readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+    readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
     readonly importLibrary: {
         (key: "marker"): Promise<google.maps.MarkerLibrary>;
         (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -122,7 +124,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
         readonly map: ShallowRef<google.maps.Map | undefined>;
         readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-        readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
         readonly importLibrary: {
             (key: "marker"): Promise<google.maps.MarkerLibrary>;
             (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -150,6 +152,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * A latitude / longitude of where to focus the map.
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
+    /**
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
+     */
+    zoom?: number;
     /**
      * Should a marker be displayed on the map where the centre is.
      */
@@ -216,7 +223,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
         readonly map: ShallowRef<google.maps.Map | undefined>;
         readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-        readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
         readonly importLibrary: {
             (key: "marker"): Promise<google.maps.MarkerLibrary>;
             (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -228,9 +235,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     }) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    centerMarker: boolean;
     width: number | string;
     height: number | string;
+    centerMarker: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     placeholder?: (props: {
         placeholder: string;

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

@@ -1,14 +1,15 @@
 <script>
-import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw, provide, shallowRef } from "vue";
-import { withQuery } from "ufo";
-import { defu } from "defu";
-import { hash } from "ohash";
-import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
-import { scriptRuntimeConfig } from "#nuxt-scripts/utils";
 import { useScriptTriggerElement } from "#nuxt-scripts/composables/useScriptTriggerElement";
 import { useScriptGoogleMaps } from "#nuxt-scripts/registry/google-maps";
+import { scriptRuntimeConfig } from "#nuxt-scripts/utils";
+import { defu } from "defu";
+import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
+import { hash } from "ohash";
+import { withQuery } from "ufo";
+import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, watch } from "vue";
 import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
-export const MAP_INJECTION_KEY = /* @__PURE__ */ Symbol("map");
+import { MAP_INJECTION_KEY } from "./injectionKeys";
+export { MAP_INJECTION_KEY } from "./injectionKeys";
 </script>
 
 <script setup>
@@ -17,6 +18,7 @@ const props = defineProps({
   aboveTheFold: { type: Boolean, required: false },
   apiKey: { type: String, required: false },
   center: { type: null, required: false },
+  zoom: { type: Number, required: false },
   centerMarker: { type: Boolean, required: false, default: true },
   mapOptions: { type: null, required: false },
   region: { type: String, required: false },
@@ -50,8 +52,12 @@ const currentMapId = computed(() => {
   return props.mapIds[currentColorMode.value] || props.mapIds.light || props.mapOptions?.mapId;
 });
 const mapsApi = ref();
-if (import.meta.dev && !apiKey)
-  throw new Error("GoogleMaps requires an API key. Please provide `apiKey` on the <ScriptGoogleMaps> or globally via `runtimeConfig.public.scripts.googleMaps.apiKey`.");
+if (import.meta.dev) {
+  if (!apiKey)
+    throw new Error("GoogleMaps requires an API key. Enable it in your nuxt.config:\n\n  scripts: {\n    registry: {\n      googleMaps: true\n    }\n  }\n\nThen set NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY in your .env file.\n\nAlternatively, pass `api-key` directly on the <ScriptGoogleMaps> component (note: this exposes the key client-side).");
+  if (!proxyConfig?.enabled && !props.apiKey)
+    console.warn("[nuxt-scripts] Google Maps proxy is not enabled. Enable `googleMaps` in your nuxt.config registry to keep your API key server-side. See: https://scripts.nuxt.com/scripts/google-maps#setup");
+}
 const rootEl = ref();
 const mapEl = ref();
 const centerOverride = ref();
@@ -67,7 +73,7 @@ const { load, status, onLoaded } = useScriptGoogleMaps({
 });
 const options = computed(() => {
   const mapId = props.mapOptions?.styles ? void 0 : currentMapId.value || "map";
-  return defu({ center: centerOverride.value, mapId }, props.mapOptions, {
+  return defu({ center: centerOverride.value, mapId, zoom: props.zoom }, props.mapOptions, {
     center: props.center,
     zoom: 15
   });
@@ -78,14 +84,11 @@ const mapMarkers = ref(/* @__PURE__ */ new Map());
 function isLocationQuery(s) {
   return typeof s === "string" && (s.split(",").length > 2 || s.includes("+"));
 }
-function resetMapMarkerMap(_marker) {
-  return new Promise(async (resolve) => {
-    const marker = _marker instanceof Promise ? await _marker : _marker;
-    if (marker) {
-      marker.setMap(null);
-    }
-    resolve();
-  });
+async function resetMapMarkerMap(_marker) {
+  const marker = _marker instanceof Promise ? await _marker : _marker;
+  if (marker) {
+    marker.setMap(null);
+  }
 }
 function normalizeAdvancedMapMarkerOptions(_options) {
   const opts = typeof _options === "string" ? {
@@ -109,24 +112,36 @@ async function createAdvancedMapMarker(_options) {
   const key = hash({ position: normalizedOptions.position });
   if (mapMarkers.value.has(key))
     return mapMarkers.value.get(key);
-  const p = new Promise(async (resolve) => {
-    const lib = await importLibrary("marker");
+  const p = importLibrary("marker").then((lib) => {
     const mapMarkerOptions = {
       ...toRaw(normalizedOptions),
       map: toRaw(map.value)
     };
-    resolve(new lib.AdvancedMarkerElement(mapMarkerOptions));
+    return new lib.AdvancedMarkerElement(mapMarkerOptions);
   });
   mapMarkers.value.set(key, p);
   return p;
 }
 const queryToLatLngCache = /* @__PURE__ */ new Map();
-async function resolveQueryToLatLang(query) {
+async function resolveQueryToLatLng(query) {
   if (query && typeof query === "object")
     return Promise.resolve(query);
   if (queryToLatLngCache.has(query)) {
     return Promise.resolve(queryToLatLngCache.get(query));
   }
+  const endpoints = runtimeConfig.public["nuxt-scripts"]?.endpoints;
+  if (endpoints?.googleMaps) {
+    const data = await $fetch("/_scripts/proxy/google-maps-geocode", {
+      params: { address: query }
+    });
+    if (data.status === "OK" && data.results?.[0]?.geometry?.location) {
+      const loc = data.results[0].geometry.location;
+      const latLng = { lat: loc.lat, lng: loc.lng };
+      queryToLatLngCache.set(query, latLng);
+      return latLng;
+    }
+    throw new Error(`No location found for ${query}`);
+  }
   return new Promise(async (resolve, reject) => {
     if (!mapsApi.value) {
       await load();
@@ -175,11 +190,21 @@ const googleMaps = {
   googleMaps: mapsApi,
   map,
   createAdvancedMapMarker,
-  resolveQueryToLatLang,
+  resolveQueryToLatLng,
   importLibrary
 };
 defineExpose(googleMaps);
-provide(MAP_INJECTION_KEY, { map, mapsApi });
+let activeInfoWindow;
+provide(MAP_INJECTION_KEY, {
+  map,
+  mapsApi,
+  activateInfoWindow(iw) {
+    if (activeInfoWindow && activeInfoWindow !== iw) {
+      activeInfoWindow.close();
+    }
+    activeInfoWindow = iw;
+  }
+});
 onMounted(() => {
   watch(ready, (v) => {
     if (v) {
@@ -229,7 +254,7 @@ onMounted(() => {
     let center = toRaw(next[0]);
     if (center) {
       if (isLocationQuery(center) && ready.value) {
-        center = await resolveQueryToLatLang(center);
+        center = await resolveQueryToLatLng(center);
       }
       map.value.setCenter(center);
       if (props.centerMarker) {
@@ -260,7 +285,7 @@ onMounted(() => {
     };
     map.value = new mapsApi.value.Map(mapEl.value, _options);
     if (center && isLocationQuery(center)) {
-      centerOverride.value = await resolveQueryToLatLang(center);
+      centerOverride.value = await resolveQueryToLatLng(center);
       map.value?.setCenter(centerOverride.value);
     }
     ready.value = true;
@@ -321,7 +346,7 @@ const placeholder = computed(() => {
       return m;
     }).join("|")
   });
-  const baseUrl = proxyConfig?.enabled ? "/_scripts/google-static-maps-proxy" : "https://maps.googleapis.com/maps/api/staticmap";
+  const baseUrl = proxyConfig?.enabled ? "/_scripts/proxy/google-static-maps" : "https://maps.googleapis.com/maps/api/staticmap";
   return withQuery(baseUrl, placeholderOptions);
 });
 const placeholderAttrs = computed(() => {
@@ -354,12 +379,14 @@ const rootAttrs = computed(() => {
     ...trigger instanceof Promise ? trigger.ssrAttrs || {} : {}
   });
 });
-onBeforeUnmount(async () => {
-  await Promise.all([...mapMarkers.value.entries()].map(([, marker]) => resetMapMarkerMap(marker)));
-  mapMarkers.value.clear();
+onBeforeUnmount(() => {
   map.value?.unbindAll();
   map.value = void 0;
   mapEl.value?.firstChild?.remove();
+  libraries.clear();
+  queryToLatLngCache.clear();
+  Promise.all(Array.from(mapMarkers.value.entries(), ([, marker]) => resetMapMarkerMap(marker)));
+  mapMarkers.value.clear();
 });
 </script>
 

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

@@ -17,12 +17,9 @@ export interface PlaceholderOptions {
     key?: string;
     signature?: string;
 }
-import type { HTMLAttributes, ImgHTMLAttributes, InjectionKey, Ref, ReservedProps, ShallowRef } from 'vue';
 import type { ElementScriptTrigger } from '#nuxt-scripts/types';
-export declare const MAP_INJECTION_KEY: InjectionKey<{
-    map: ShallowRef<google.maps.Map | undefined>;
-    mapsApi: Ref<typeof google.maps | undefined>;
-}>;
+import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps, ShallowRef } from 'vue';
+export { MAP_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -43,6 +40,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * A latitude / longitude of where to focus the map.
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
+    /**
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
+     */
+    zoom?: number;
     /**
      * Should a marker be displayed on the map where the centre is.
      */
@@ -107,7 +109,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
     readonly map: ShallowRef<google.maps.Map | undefined>;
     readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-    readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+    readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
     readonly importLibrary: {
         (key: "marker"): Promise<google.maps.MarkerLibrary>;
         (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -122,7 +124,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
         readonly map: ShallowRef<google.maps.Map | undefined>;
         readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-        readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
         readonly importLibrary: {
             (key: "marker"): Promise<google.maps.MarkerLibrary>;
             (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -150,6 +152,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * A latitude / longitude of where to focus the map.
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
+    /**
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
+     */
+    zoom?: number;
     /**
      * Should a marker be displayed on the map where the centre is.
      */
@@ -216,7 +223,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
         readonly map: ShallowRef<google.maps.Map | undefined>;
         readonly createAdvancedMapMarker: (_options?: google.maps.marker.AdvancedMarkerElementOptions | `${string},${string}`) => Promise<google.maps.marker.AdvancedMarkerElement | undefined>;
-        readonly resolveQueryToLatLang: (query: string) => Promise<google.maps.LatLng | undefined>;
+        readonly resolveQueryToLatLng: (query: string) => Promise<google.maps.LatLng | google.maps.LatLngLiteral | undefined>;
         readonly importLibrary: {
             (key: "marker"): Promise<google.maps.MarkerLibrary>;
             (key: "places"): Promise<google.maps.PlacesLibrary>;
@@ -228,9 +235,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     }) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    centerMarker: boolean;
     width: number | string;
     height: number | string;
+    centerMarker: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     placeholder?: (props: {
         placeholder: string;

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

@@ -1,58 +1,41 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * 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 advanced 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, {} & {
+}, {}, {}, {}, {}, 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<{
+    /**
+     * 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 advanced 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/ScriptGoogleMapsAdvancedMarkerElement.vue

@@ -1,86 +1,83 @@
-<template>
-  <slot v-if="advancedMarkerElement" />
-</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 { bindGoogleMapsEvents } from "./bindGoogleMapsEvents";
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./injectionKeys";
 import { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const ADVANCED_MARKER_ELEMENT_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
+import { useGoogleMapsResource } from "./useGoogleMapsResource";
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from "./injectionKeys";
 </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 advancedMarkerElement = shallowRef(void 0);
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => {
-  await mapContext.mapsApi.value.importLibrary("marker");
-  advancedMarkerElement.value = new mapContext.mapsApi.value.marker.AdvancedMarkerElement(props.options);
-  setupAdvancedMarkerElementEventListeners(advancedMarkerElement.value);
-  if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(advancedMarkerElement.value);
-  } else {
-    advancedMarkerElement.value.map = mapContext.map.value;
-  }
-  whenever(() => props.options, (options) => {
-    if (advancedMarkerElement.value && options) {
-      Object.assign(advancedMarkerElement.value, options);
+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;
     }
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!advancedMarkerElement.value || !mapContext?.mapsApi.value) {
-    return;
-  }
-  mapContext.mapsApi.value.event.clearInstanceListeners(advancedMarkerElement.value);
-  if (markerClustererContext) {
-    markerClustererContext.markerClusterer.value?.removeMarker(advancedMarkerElement.value);
-  } else {
-    advancedMarkerElement.value.map = null;
   }
 });
+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(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, { advancedMarkerElement });
-function setupAdvancedMarkerElementEventListeners(advancedMarkerElement2) {
-  eventsWithoutPayload.forEach((event) => {
-    advancedMarkerElement2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    advancedMarkerElement2.addListener(event, (payload) => emit(event, payload));
-  });
-}
 </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>

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

@@ -1,58 +1,41 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+export { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './injectionKeys.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * 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 advanced 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, {} & {
+}, {}, {}, {}, {}, 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<{
+    /**
+     * 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 advanced 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 & {