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

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

@@ -1,28 +1,6 @@
-export interface PlaceholderOptions {
-    width?: string | number;
-    height?: string | number;
-    center?: string;
-    zoom?: number;
-    size?: string;
-    scale?: number;
-    format?: 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline';
-    maptype?: 'roadmap' | 'satellite' | 'terrain' | 'hybrid';
-    language?: string;
-    region?: string;
-    markers?: string;
-    path?: string;
-    visible?: string;
-    style?: string;
-    map_id?: string;
-    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, ReservedProps, ShallowRef } from 'vue';
+export { MAP_INJECTION_KEY } from './useGoogleMapsResource.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -30,11 +8,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Defines the trigger event to load the script.
      */
     trigger?: ElementScriptTrigger;
-    /**
-     * Is Google Maps being rendered above the fold?
-     * This will load the placeholder image with higher priority.
-     */
-    aboveTheFold?: boolean;
     /**
      * Defines the Google Maps API key. Must have access to the Static Maps API as well.
      */
@@ -44,9 +17,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
     /**
-     * Should a marker be displayed on the map where the centre is.
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
      */
-    centerMarker?: boolean;
+    zoom?: number;
     /**
      * Options for the map.
      */
@@ -71,24 +45,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Defines the height of the map
      */
     height?: number | string;
-    /**
-     * Customize the placeholder image attributes.
-     *
-     * @see https://developers.google.com/maps/documentation/maps-static/start.
-     */
-    placeholderOptions?: PlaceholderOptions;
-    /**
-     * Customize the placeholder image attributes.
-     */
-    placeholderAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
     /**
      * Customize the root element attributes.
      */
     rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
-    /**
-     * Extra Markers to add to the map.
-     */
-    markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[];
     /**
      * Map IDs for light and dark color modes.
      * When provided, the map will automatically switch styles based on color mode.
@@ -104,10 +64,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      */
     colorMode?: "light" | "dark";
 }, {
-    readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
+    readonly googleMaps: import("vue").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>;
@@ -119,10 +78,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: () => any;
     ready: (e: {
-        readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
+        readonly googleMaps: import("vue").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>;
@@ -137,11 +95,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Defines the trigger event to load the script.
      */
     trigger?: ElementScriptTrigger;
-    /**
-     * Is Google Maps being rendered above the fold?
-     * This will load the placeholder image with higher priority.
-     */
-    aboveTheFold?: boolean;
     /**
      * Defines the Google Maps API key. Must have access to the Static Maps API as well.
      */
@@ -151,9 +104,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      */
     center?: google.maps.LatLng | google.maps.LatLngLiteral | `${string},${string}`;
     /**
-     * Should a marker be displayed on the map where the centre is.
+     * Zoom level for the map (0-21). Reactive: changing this will update the map.
+     * Takes precedence over mapOptions.zoom when provided.
      */
-    centerMarker?: boolean;
+    zoom?: number;
     /**
      * Options for the map.
      */
@@ -178,24 +132,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Defines the height of the map
      */
     height?: number | string;
-    /**
-     * Customize the placeholder image attributes.
-     *
-     * @see https://developers.google.com/maps/documentation/maps-static/start.
-     */
-    placeholderOptions?: PlaceholderOptions;
-    /**
-     * Customize the placeholder image attributes.
-     */
-    placeholderAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>;
     /**
      * Customize the root element attributes.
      */
     rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>;
-    /**
-     * Extra Markers to add to the map.
-     */
-    markers?: (`${string},${string}` | google.maps.marker.AdvancedMarkerElementOptions)[];
     /**
      * Map IDs for light and dark color modes.
      * When provided, the map will automatically switch styles based on color mode.
@@ -213,10 +153,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{
     onError?: (() => any) | undefined;
     onReady?: ((e: {
-        readonly googleMaps: Ref<typeof google.maps | undefined, typeof google.maps | undefined>;
+        readonly googleMaps: import("vue").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,21 +167,14 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     }) => any) | undefined;
 }>, {
     trigger: ElementScriptTrigger;
-    centerMarker: boolean;
     width: number | string;
     height: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    placeholder?: (props: {
-        placeholder: string;
-    }) => any;
-} & {
-    loading?: (props: {}) => any;
-} & {
-    awaitingLoad?: (props: {}) => any;
-} & {
-    error?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
+    default?: () => any;
+    placeholder?: () => any;
+    loading?: () => any;
+    awaitingLoad?: () => any;
+    error?: () => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,40 +1,37 @@
 <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, scriptsPrefix } from "#nuxt-scripts/utils";
+import { defu } from "defu";
+import { tryUseNuxtApp, useHead, useRuntimeConfig } from "nuxt/app";
+import { computed, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRaw, useAttrs, watch } from "vue";
 import ScriptAriaLoadingIndicator from "../ScriptAriaLoadingIndicator.vue";
-export const MAP_INJECTION_KEY = /* @__PURE__ */ Symbol("map");
+import { MAP_INJECTION_KEY } from "./useGoogleMapsResource";
+const DIGITS_ONLY_RE = /^\d+$/;
+const DIGITS_PX_RE = /^\d+px$/i;
+export { MAP_INJECTION_KEY } from "./useGoogleMapsResource";
 </script>
 
 <script setup>
 const props = defineProps({
   trigger: { type: [String, Array, Boolean], required: false, default: ["mouseenter", "mouseover", "mousedown"] },
-  aboveTheFold: { type: Boolean, required: false },
   apiKey: { type: String, required: false },
   center: { type: null, required: false },
-  centerMarker: { type: Boolean, required: false, default: true },
+  zoom: { type: Number, required: false },
   mapOptions: { type: null, required: false },
   region: { type: String, required: false },
   language: { type: String, required: false },
   version: { type: String, required: false },
   width: { type: [Number, String], required: false, default: 640 },
   height: { type: [Number, String], required: false, default: 400 },
-  placeholderOptions: { type: Object, required: false },
-  placeholderAttrs: { type: Object, required: false },
   rootAttrs: { type: Object, required: false },
-  markers: { type: Array, required: false },
   mapIds: { type: Object, required: false },
   colorMode: { type: String, required: false }
 });
 const emits = defineEmits(["ready", "error"]);
+defineSlots();
 const apiKey = props.apiKey || scriptRuntimeConfig("googleMaps")?.apiKey;
 const runtimeConfig = useRuntimeConfig();
-const proxyConfig = runtimeConfig.public["nuxt-scripts"]?.googleStaticMapsProxy;
 const nuxtApp = tryUseNuxtApp();
 const nuxtColorMode = nuxtApp?.$colorMode;
 const currentColorMode = computed(() => {
@@ -50,8 +47,22 @@ 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).");
+  const attrs = useAttrs();
+  const removedProps = {
+    markers: "Use child <ScriptGoogleMapsMarker> components instead.",
+    centerMarker: 'Use a child <ScriptGoogleMapsMarker :position="center" /> instead.',
+    placeholderOptions: "Use <ScriptGoogleMapsStaticMap> inside the #placeholder slot instead.",
+    placeholderAttrs: "Use <ScriptGoogleMapsStaticMap> with :img-attrs instead.",
+    aboveTheFold: 'Use <ScriptGoogleMapsStaticMap loading="eager"> inside #placeholder instead.'
+  };
+  for (const [prop, message] of Object.entries(removedProps)) {
+    if (prop in attrs)
+      console.warn(`[nuxt-scripts] <ScriptGoogleMaps> prop "${prop}" was removed in v1. ${message} See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1`);
+  }
+}
 const rootEl = ref();
 const mapEl = ref();
 const centerOverride = ref();
@@ -67,66 +78,36 @@ 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
   });
 });
 const ready = ref(false);
 const map = shallowRef();
-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();
-  });
-}
-function normalizeAdvancedMapMarkerOptions(_options) {
-  const opts = typeof _options === "string" ? {
-    position: {
-      lat: Number.parseFloat(_options.split(",")[0] || "0"),
-      lng: Number.parseFloat(_options.split(",")[1] || "0")
-    }
-  } : _options || {};
-  if (!opts.position) {
-    opts.position = {
-      lat: 0,
-      lng: 0
-    };
-  }
-  return opts;
-}
-async function createAdvancedMapMarker(_options) {
-  if (!_options)
-    return;
-  const normalizedOptions = normalizeAdvancedMapMarkerOptions(_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 mapMarkerOptions = {
-      ...toRaw(normalizedOptions),
-      map: toRaw(map.value)
-    };
-    resolve(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(`${scriptsPrefix()}/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();
@@ -174,12 +155,21 @@ function importLibrary(key) {
 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) {
@@ -194,58 +184,16 @@ onMounted(() => {
   watch(options, () => {
     map.value?.setOptions(options.value);
   });
-  watch([() => props.markers, map], async () => {
-    if (!map.value) {
-      return;
-    }
-    const nextMap = new Map((props.markers || []).map((m) => [hash({ position: normalizeAdvancedMapMarkerOptions(m).position }), m]));
-    const toRemove = new Set([
-      ...mapMarkers.value.keys()
-    ].filter((k) => !nextMap.has(k)));
-    const toAdd = new Set([...nextMap.keys()].filter((k) => !mapMarkers.value.has(k)));
-    const centerHash = hash({ position: options.value.center });
-    for (const key of toRemove) {
-      if (props.centerMarker && key === centerHash) {
-        continue;
-      }
-      const marker = await mapMarkers.value.get(key);
-      if (marker) {
-        resetMapMarkerMap(marker).then(() => {
-          mapMarkers.value.delete(key);
-        });
-      }
-    }
-    for (const k of toAdd) {
-      createAdvancedMapMarker(nextMap.get(k));
-    }
-  }, {
-    immediate: true,
-    deep: true
-  });
-  watch([() => options.value.center, ready, map], async (next, prev) => {
+  watch([() => options.value.center, ready, map], async (next) => {
     if (!map.value) {
       return;
     }
     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) {
-        if (options.value.mapId) {
-          return;
-        }
-        if (prev[0]) {
-          const prevCenterHash = hash({ position: prev[0] });
-          if (mapMarkers.value.has(prevCenterHash)) {
-            resetMapMarkerMap(mapMarkers.value.get(prevCenterHash)).then(() => {
-              mapMarkers.value.delete(prevCenterHash);
-            });
-          }
-        }
-        createAdvancedMapMarker({ position: center });
-      }
     }
   }, {
     immediate: true
@@ -260,115 +208,66 @@ 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;
   });
 });
-if (import.meta.server && !proxyConfig?.enabled) {
+if (import.meta.server) {
   useHead({
     link: [
       {
-        rel: props.aboveTheFold ? "preconnect" : "dns-prefetch",
+        rel: "dns-prefetch",
         href: "https://maps.googleapis.com"
       }
     ]
   });
 }
-function transformMapStyles(styles) {
-  return styles.map((style) => {
-    const feature = style.featureType ? `feature:${style.featureType}` : "";
-    const element = style.elementType ? `element:${style.elementType}` : "";
-    const rules = (style.stylers || []).map((styler) => {
-      return Object.entries(styler).map(([key, value]) => {
-        if (key === "color" && typeof value === "string") {
-          value = value.replace("#", "0x");
-        }
-        return `${key}:${value}`;
-      }).join("|");
-    }).filter(Boolean).join("|");
-    return [feature, element, rules].filter(Boolean).join("|");
-  }).filter(Boolean);
+function toCssUnit(value) {
+  if (value === void 0)
+    return void 0;
+  if (typeof value === "number")
+    return `${value}px`;
+  return value;
+}
+function isPixelValue(value) {
+  if (typeof value === "number")
+    return true;
+  if (typeof value === "string")
+    return DIGITS_ONLY_RE.test(value) || DIGITS_PX_RE.test(value);
+  return false;
 }
-const placeholder = computed(() => {
-  let center = options.value.center;
-  if (center && typeof center === "object") {
-    center = `${center.lat},${center.lng}`;
-  }
-  const placeholderOptions = defu(props.placeholderOptions, {
-    // only map option values
-    zoom: options.value.zoom,
-    center
-  }, {
-    size: `${props.width}x${props.height}`,
-    // Only include API key if not using proxy (proxy injects it server-side)
-    key: proxyConfig?.enabled ? void 0 : apiKey,
-    scale: 2,
-    // we assume a high DPI to avoid hydration issues
-    style: props.mapOptions?.styles ? transformMapStyles(props.mapOptions.styles) : void 0,
-    map_id: currentMapId.value,
-    markers: [
-      ...props.markers || [],
-      props.centerMarker && center
-    ].filter(Boolean).map((m) => {
-      if (typeof m === "object" && m.location) {
-        m = m.location;
-      }
-      if (typeof m === "object" && m.lat) {
-        return `${m.lat},${m.lng}`;
-      }
-      return m;
-    }).join("|")
-  });
-  const baseUrl = proxyConfig?.enabled ? "/_scripts/google-static-maps-proxy" : "https://maps.googleapis.com/maps/api/staticmap";
-  return withQuery(baseUrl, placeholderOptions);
-});
-const placeholderAttrs = computed(() => {
-  return defu(props.placeholderAttrs, {
-    src: placeholder.value,
-    alt: "Google Maps Static Map",
-    loading: props.aboveTheFold ? "eager" : "lazy",
-    style: {
-      cursor: "pointer",
-      width: "100%",
-      objectFit: "cover",
-      height: "100%"
-    }
-  });
-});
 const rootAttrs = computed(() => {
   return defu(props.rootAttrs, {
     "aria-busy": status.value === "loading",
-    "aria-label": status.value === "awaitingLoad" ? "Google Maps Static Map" : status.value === "loading" ? "Google Maps Map Embed Loading" : "Google Maps Embed",
+    "aria-label": status.value === "awaitingLoad" ? "Google Maps" : status.value === "loading" ? "Google Maps Loading" : "Google Maps",
     "aria-live": "polite",
     "role": "application",
     "style": {
       cursor: "pointer",
       position: "relative",
       maxWidth: "100%",
-      width: `${props.width}px`,
-      height: `'auto'`,
-      aspectRatio: `${props.width}/${props.height}`
+      width: toCssUnit(props.width),
+      height: isPixelValue(props.width) && isPixelValue(props.height) ? "auto" : toCssUnit(props.height),
+      aspectRatio: isPixelValue(props.width) && isPixelValue(props.height) ? `${props.width}/${props.height}` : void 0
     },
     ...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();
 });
 </script>
 
 <template>
   <div ref="rootEl" v-bind="rootAttrs">
     <div v-show="ready" ref="mapEl" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
-    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
-      <img v-bind="placeholderAttrs">
-    </slot>
+    <slot v-if="!ready" name="placeholder" />
     <slot v-if="status !== 'awaitingLoad' && !ready" name="loading">
       <ScriptAriaLoadingIndicator />
     </slot>