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

package/dist/runtime/components/GoogleMaps/ScriptGoogleMaps.vue.d.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,13 +167,10 @@ 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;
+    placeholder?: (props: {}) => any;
 } & {
     loading?: (props: {}) => any;
 } & {

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

@@ -1,60 +1,11 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    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.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>, {
-    default?: (props: {}) => any;
-}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,86 +1,15 @@
-<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 { MARKER_CLUSTERER_INJECTION_KEY } from "./ScriptGoogleMapsMarkerClusterer.vue";
-export const ADVANCED_MARKER_ELEMENT_INJECTION_KEY = /* @__PURE__ */ Symbol("marker");
-</script>
-
 <script setup>
-const props = defineProps({
-  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 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);
-    }
-  }, {
-    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;
-  }
-});
-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));
-  });
+if (import.meta.dev) {
+  console.warn(
+    "[nuxt-scripts] <ScriptGoogleMapsAdvancedMarkerElement> was renamed to <ScriptGoogleMapsMarker> in v1. See https://scripts.nuxt.com/docs/migration-guide/v0-to-v1"
+  );
 }
 </script>
+
+<template>
+  <ScriptGoogleMapsMarker v-bind="$attrs">
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData || {}" />
+    </template>
+  </ScriptGoogleMapsMarker>
+</template>

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

@@ -1,60 +1,11 @@
-import type { InjectionKey, ShallowRef } from 'vue';
-export declare const ADVANCED_MARKER_ELEMENT_INJECTION_KEY: InjectionKey<{
-    advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>;
-}>;
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    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.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>, {
-    default?: (props: {}) => any;
-}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,7 +1,11 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the circle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#CircleOptions
+     */
     options?: Omit<google.maps.CircleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (payload: google.maps.MapMouseEvent) => any;
     dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;

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

@@ -1,14 +1,10 @@
-<template>
-
-</template>
-
 <script setup>
-import { inject, onUnmounted } from "vue";
-import { whenever } from "@vueuse/core";
-import { MAP_INJECTION_KEY } from "./ScriptGoogleMaps.vue";
+import { watch } from "vue";
+import { bindGoogleMapsEvents, useGoogleMapsResource } from "./useGoogleMapsResource";
 const props = defineProps({
   options: { type: Object, required: false }
 });
+const emit = defineEmits(["center_changed", "radius_changed", "click", "dblclick", "drag", "dragend", "dragstart", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "rightclick"]);
 const eventsWithoutPayload = [
   "center_changed",
   "radius_changed"
@@ -26,37 +22,27 @@ const eventsWithMapMouseEventPayload = [
   "mouseup",
   "rightclick"
 ];
-const emit = defineEmits([]);
-const mapContext = inject(MAP_INJECTION_KEY, void 0);
-let circle = void 0;
-whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
-  circle = new mapContext.mapsApi.value.Circle({
-    map: mapContext.map.value,
-    ...props.options
-  });
-  setupCircleEventListeners(circle);
-  whenever(() => props.options, (options) => {
-    circle?.setOptions(options);
-  }, {
-    deep: true
-  });
-}, {
-  immediate: true,
-  once: true
-});
-onUnmounted(() => {
-  if (!circle || !mapContext?.mapsApi.value) {
-    return;
+const circle = useGoogleMapsResource({
+  create({ mapsApi, map }) {
+    const c = new mapsApi.Circle({ map, ...props.options });
+    bindGoogleMapsEvents(c, emit, {
+      noPayload: eventsWithoutPayload,
+      withPayload: eventsWithMapMouseEventPayload
+    });
+    return c;
+  },
+  cleanup(c, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(c);
+    c.setMap(null);
   }
-  mapContext.mapsApi.value.event.clearInstanceListeners(circle);
-  circle.setMap(null);
 });
-function setupCircleEventListeners(circle2) {
-  eventsWithoutPayload.forEach((event) => {
-    circle2.addListener(event, () => emit(event));
-  });
-  eventsWithMapMouseEventPayload.forEach((event) => {
-    circle2.addListener(event, (payload) => emit(event, payload));
-  });
-}
+watch(() => props.options, (options) => {
+  if (circle.value && options) {
+    circle.value.setOptions(options);
+  }
+}, { deep: true });
 </script>
+
+<template>
+
+</template>

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

@@ -1,7 +1,11 @@
 type __VLS_Props = {
+    /**
+     * Configuration options for the circle overlay.
+     * @see https://developers.google.com/maps/documentation/javascript/reference/polygon#CircleOptions
+     */
     options?: Omit<google.maps.CircleOptions, 'map'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (payload: google.maps.MapMouseEvent) => any;
     dblclick: (payload: google.maps.MapMouseEvent) => any;
     drag: (payload: google.maps.MapMouseEvent) => any;

package/dist/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.d.vue.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/ScriptGoogleMapsGeoJson.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { watch } from "vue";
+import { bindGoogleMapsEvents, useGoogleMapsResource } from "./useGoogleMapsResource";
+const props = defineProps({
+  src: { type: [String, Object], required: true },
+  style: { type: null, required: false }
+});
+const emit = defineEmits(["click", "contextmenu", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "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);
+    bindGoogleMapsEvents(layer, emit, { withPayload: [...dataEvents, ...featureEvents] });
+    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 });
+</script>
+
+<template>
+
+</template>