From d4a0cfcfdf05c43da1564436ac1457ba1ab018c3 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 19 Mar 2026 23:21:21 +1100
Subject: [PATCH 1/8] feat: add `ScriptGoogleMapsGeoJson` component (closes
 #655)

---
 .../GoogleMaps/ScriptGoogleMapsGeoJson.vue    | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue

diff --git a/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
new file mode 100644
index 00000000..ebfaf77c
--- /dev/null
+++ b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useGoogleMapsResource } from './useGoogleMapsResource'
+
+const props = defineProps<{
+  src: string | object
+  style?: google.maps.Data.StylingFunction | google.maps.Data.StyleOptions
+}>()
+
+const emit = defineEmits<{
+  (event: typeof dataEvents[number], payload: google.maps.Data.MouseEvent): void
+  (event: 'addfeature', payload: google.maps.Data.AddFeatureEvent): void
+  (event: 'removefeature', payload: google.maps.Data.RemoveFeatureEvent): void
+  (event: 'setgeometry', payload: google.maps.Data.SetGeometryEvent): void
+  (event: 'setproperty', payload: google.maps.Data.SetPropertyEvent): void
+  (event: 'removeproperty', payload: google.maps.Data.RemovePropertyEvent): void
+}>()
+
+const dataEvents = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+const featureEvents = [
+  'addfeature',
+  'removefeature',
+  'setgeometry',
+  'setproperty',
+  'removeproperty',
+] as const
+
+function loadGeoJson(src: string | object, layer: google.maps.Data) {
+  if (typeof src === 'string')
+    layer.loadGeoJson(src)
+  else
+    layer.addGeoJson(src)
+}
+
+const dataLayer = useGoogleMapsResource<google.maps.Data>({
+  create({ mapsApi, map }) {
+    const layer = new mapsApi.Data({ map })
+
+    if (props.style)
+      layer.setStyle(props.style)
+
+    loadGeoJson(props.src, layer)
+    setupEventListeners(layer)
+
+    return layer
+  },
+  cleanup(layer, { mapsApi }) {
+    mapsApi.event.clearInstanceListeners(layer)
+    layer.setMap(null)
+  },
+})
+
+watch(() => props.src, (src) => {
+  if (!dataLayer.value)
+    return
+  dataLayer.value.forEach(feature => dataLayer.value!.remove(feature))
+  loadGeoJson(src, dataLayer.value)
+})
+
+watch(() => props.style, (style) => {
+  if (dataLayer.value && style)
+    dataLayer.value.setStyle(style)
+}, { deep: true })
+
+function setupEventListeners(layer: google.maps.Data) {
+  dataEvents.forEach((event) => {
+    layer.addListener(event, (payload: google.maps.Data.MouseEvent) => emit(event, payload))
+  })
+  featureEvents.forEach((event) => {
+    layer.addListener(event, (payload: any) => emit(event, payload))
+  })
+}
+</script>
+
+<template>
+</template>

From 1715e789287b41565d1827bf847ccf204dd9314a Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 19 Mar 2026 23:30:16 +1100
Subject: [PATCH 2/8] test: add tests for ScriptGoogleMapsGeoJson component

- Add Data layer mock (createMockDataLayer) with GeoJSON methods
- Add DATA_MOUSE_EVENTS and DATA_FEATURE_EVENTS constants
- Add simulateGeoJsonLifecycle helper and geoJson test options
- Add unit tests covering creation, loading, events, cleanup, lifecycle
- Add GeoJson to playground sfcs page
---
 .../pages/third-parties/google-maps/sfcs.vue  |  40 +++++
 .../__helpers__/google-maps-test-utils.ts     |  41 +++++
 test/unit/__mocks__/google-maps-api.ts        |  49 ++++++
 test/unit/google-maps-geojson.test.ts         | 159 ++++++++++++++++++
 4 files changed, 289 insertions(+)
 create mode 100644 test/unit/google-maps-geojson.test.ts

diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue
index cf58f3fb..3fd79955 100644
--- a/playground/pages/third-parties/google-maps/sfcs.vue
+++ b/playground/pages/third-parties/google-maps/sfcs.vue
@@ -36,6 +36,28 @@ const heatmapLayerData = ref<google.maps.LatLng[]>([])
 
 const isCircleShown = ref(false)
 
+const isGeoJsonShown = ref(false)
+
+const geoJsonData = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[
+          [151.20, -33.87],
+          [151.25, -33.87],
+          [151.25, -33.90],
+          [151.20, -33.90],
+          [151.20, -33.87],
+        ]],
+      },
+      properties: { name: 'Sydney CBD' },
+    },
+  ],
+}
+
 const googleMapsRef = useTemplateRef('googleMapsRef')
 
 whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
@@ -191,6 +213,17 @@ whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
         }"
       />
 
+      <ScriptGoogleMapsGeoJson
+        v-if="isGeoJsonShown"
+        :src="geoJsonData"
+        :style="{
+          fillColor: '#4285F4',
+          fillOpacity: 0.3,
+          strokeColor: '#4285F4',
+          strokeWeight: 2,
+        }"
+      />
+
       <ScriptGoogleMapsCircle
         v-if="isCircleShown"
         :options="{
@@ -269,6 +302,13 @@ whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
         {{ `${isHeatmapLayerShown ? 'Hide' : 'Show'} heatmap layer` }}
       </button>
 
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isGeoJsonShown = !isGeoJsonShown"
+      >
+        {{ `${isGeoJsonShown ? 'Hide' : 'Show'} geojson` }}
+      </button>
+
       <button
         class="bg-[#ffa500] rounded-lg px-2 py-1"
         @click="isCircleShown = !isCircleShown"
diff --git a/test/unit/__helpers__/google-maps-test-utils.ts b/test/unit/__helpers__/google-maps-test-utils.ts
index c9b9571c..4637c960 100644
--- a/test/unit/__helpers__/google-maps-test-utils.ts
+++ b/test/unit/__helpers__/google-maps-test-utils.ts
@@ -134,6 +134,37 @@ export async function simulateMarkerClustererLifecycle(mocks: MocksType, options
   return { clusterer, markers }
 }
 
+/**
+ * Simulates the component lifecycle for GeoJson data layers
+ */
+export function simulateGeoJsonLifecycle(mocks: MocksType, geoJson: string | object, style?: any) {
+  // Creation
+  const dataLayer = new mocks.mockMapsApi.Data({ map: ref({}).value })
+
+  // Style setup
+  if (style) {
+    dataLayer.setStyle(style)
+  }
+
+  // GeoJson loading
+  if (typeof geoJson === 'string') {
+    dataLayer.loadGeoJson(geoJson)
+  }
+  else {
+    dataLayer.addGeoJson(geoJson)
+  }
+
+  // Event listener setup
+  dataLayer.addListener('click', vi.fn())
+  dataLayer.addListener('addfeature', vi.fn())
+
+  // Cleanup
+  mocks.mockMapsApi.event.clearInstanceListeners(dataLayer)
+  dataLayer.setMap(null)
+
+  return dataLayer
+}
+
 /**
  * Test options for various Google Maps objects
  */
@@ -159,4 +190,14 @@ export const TEST_OPTIONS = {
     scale: 1.5,
     background: '#FF0000',
   },
+  geoJson: {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        geometry: { type: 'Point', coordinates: [151.2093, -33.8688] },
+        properties: { name: 'Sydney' },
+      },
+    ],
+  },
 } as const
diff --git a/test/unit/__mocks__/google-maps-api.ts b/test/unit/__mocks__/google-maps-api.ts
index 60449968..95a25b11 100644
--- a/test/unit/__mocks__/google-maps-api.ts
+++ b/test/unit/__mocks__/google-maps-api.ts
@@ -43,6 +43,29 @@ export function createMockMarkerClusterer() {
   }
 }
 
+export function createMockDataLayer() {
+  const features: any[] = []
+  return {
+    setStyle: vi.fn(),
+    setMap: vi.fn(),
+    addGeoJson: vi.fn((geoJson: any) => {
+      features.push(geoJson)
+      return features
+    }),
+    loadGeoJson: vi.fn(),
+    forEach: vi.fn((callback: (feature: any) => void) => {
+      features.forEach(callback)
+    }),
+    remove: vi.fn((feature: any) => {
+      const idx = features.indexOf(feature)
+      if (idx >= 0)
+        features.splice(idx, 1)
+    }),
+    addListener: vi.fn(),
+    _features: features,
+  }
+}
+
 // Class-based mocks for Vitest 4 constructor support - returns shared instance
 function createMockClass<T>(instance: T) {
   // eslint-disable-next-line prefer-arrow-callback
@@ -71,11 +94,13 @@ export function createMockGoogleMapsAPI() {
   const mockInfoWindow = createMockInfoWindow()
   const mockPinElement = createMockPinElement()
   const mockMarkerClusterer = createMockMarkerClusterer()
+  const mockDataLayer = createMockDataLayer()
 
   const MockMarker = createMockClass(mockMarker)
   const MockAdvancedMarkerElement = createMockClass(mockAdvancedMarkerElement)
   const MockPinElement = createMockClass(mockPinElement)
   const MockInfoWindow = createMockClass(mockInfoWindow)
+  const MockData = createMockClass(mockDataLayer)
   // eslint-disable-next-line prefer-arrow-callback
   const MockLatLng = vi.fn(function (this: any, lat: number, lng: number) {
     return { lat, lng }
@@ -88,6 +113,7 @@ export function createMockGoogleMapsAPI() {
       PinElement: MockPinElement,
     },
     InfoWindow: MockInfoWindow,
+    Data: MockData,
     event: {
       clearInstanceListeners: vi.fn(),
     },
@@ -104,6 +130,7 @@ export function createMockGoogleMapsAPI() {
     mockInfoWindow,
     mockMarkerClusterer,
     mockPinElement,
+    mockDataLayer,
     mockMapsApi,
   }
 }
@@ -122,6 +149,7 @@ export function createMockGoogleMapsAPIWithInstances() {
   const MockPolyline = createMockClassFactory(() => ({ setOptions: vi.fn(), setMap: vi.fn(), addListener: vi.fn() }))
   const MockRectangle = createMockClassFactory(() => ({ setOptions: vi.fn(), setMap: vi.fn(), addListener: vi.fn() }))
   const MockHeatmapLayer = createMockClassFactory(() => ({ setOptions: vi.fn(), setMap: vi.fn() }))
+  const MockData = createMockClassFactory(createMockDataLayer)
 
   const mockMapsApi = {
     Marker: MockMarker,
@@ -130,6 +158,7 @@ export function createMockGoogleMapsAPIWithInstances() {
       PinElement: MockPinElement,
     },
     InfoWindow: MockInfoWindow,
+    Data: MockData,
     Circle: MockCircle,
     Polygon: MockPolygon,
     Polyline: MockPolyline,
@@ -168,6 +197,7 @@ export function createMockGoogleMapsAPIWithInstances() {
     MockPolyline,
     MockRectangle,
     MockHeatmapLayer,
+    MockData,
   }
 }
 
@@ -216,3 +246,22 @@ export const MARKER_CLUSTERER_EVENTS = [
   'clusteringbegin',
   'clusteringend',
 ] as const
+
+export const DATA_MOUSE_EVENTS = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+export const DATA_FEATURE_EVENTS = [
+  'addfeature',
+  'removefeature',
+  'setgeometry',
+  'setproperty',
+  'removeproperty',
+] as const
diff --git a/test/unit/google-maps-geojson.test.ts b/test/unit/google-maps-geojson.test.ts
new file mode 100644
index 00000000..4f55daa6
--- /dev/null
+++ b/test/unit/google-maps-geojson.test.ts
@@ -0,0 +1,159 @@
+import type { MocksType } from './__helpers__/google-maps-test-utils'
+/**
+ * @vitest-environment happy-dom
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  simulateGeoJsonLifecycle,
+  TEST_OPTIONS,
+} from './__helpers__/google-maps-test-utils'
+import {
+  createMockGoogleMapsAPI,
+  DATA_FEATURE_EVENTS,
+  DATA_MOUSE_EVENTS,
+} from './__mocks__/google-maps-api'
+
+describe('scriptGoogleMapsGeoJson Component Logic', () => {
+  let mocks: MocksType
+
+  beforeEach(() => {
+    mocks = createMockGoogleMapsAPI()
+    vi.clearAllMocks()
+  })
+
+  describe('data Layer Creation', () => {
+    it('should create a Data layer with map option', () => {
+      const mockMap = {}
+      const dataLayer = new mocks.mockMapsApi.Data({ map: mockMap })
+
+      expect(mocks.mockMapsApi.Data).toHaveBeenCalledWith({ map: mockMap })
+      expect(dataLayer).toBe(mocks.mockDataLayer)
+    })
+
+    it('should set style when provided', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+      const style = { fillColor: 'red', strokeWeight: 2 }
+
+      dataLayer.setStyle(style)
+
+      expect(dataLayer.setStyle).toHaveBeenCalledWith(style)
+    })
+
+    it('should set style with a styling function', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+      const styleFn = vi.fn(() => ({ fillColor: 'blue' }))
+
+      dataLayer.setStyle(styleFn)
+
+      expect(dataLayer.setStyle).toHaveBeenCalledWith(styleFn)
+    })
+  })
+
+  describe('geoJson Loading', () => {
+    it('should call addGeoJson for object sources', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+      const geoJson = TEST_OPTIONS.geoJson
+
+      dataLayer.addGeoJson(geoJson)
+
+      expect(dataLayer.addGeoJson).toHaveBeenCalledWith(geoJson)
+    })
+
+    it('should call loadGeoJson for string URL sources', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+      const url = 'https://example.com/data.geojson'
+
+      dataLayer.loadGeoJson(url)
+
+      expect(dataLayer.loadGeoJson).toHaveBeenCalledWith(url)
+    })
+
+    it('should clear existing features before reloading', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+
+      // Add initial data
+      dataLayer.addGeoJson({ type: 'FeatureCollection', features: [] })
+
+      // Clear features (simulate src watcher)
+      dataLayer.forEach((feature: any) => dataLayer.remove(feature))
+
+      expect(dataLayer.forEach).toHaveBeenCalled()
+    })
+  })
+
+  describe('event Handling', () => {
+    it('should register all mouse events', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+
+      DATA_MOUSE_EVENTS.forEach((event) => {
+        dataLayer.addListener(event, vi.fn())
+      })
+
+      expect(dataLayer.addListener).toHaveBeenCalledTimes(DATA_MOUSE_EVENTS.length)
+      DATA_MOUSE_EVENTS.forEach((event) => {
+        expect(dataLayer.addListener).toHaveBeenCalledWith(event, expect.any(Function))
+      })
+    })
+
+    it('should register all feature events', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+
+      DATA_FEATURE_EVENTS.forEach((event) => {
+        dataLayer.addListener(event, vi.fn())
+      })
+
+      expect(dataLayer.addListener).toHaveBeenCalledTimes(DATA_FEATURE_EVENTS.length)
+      DATA_FEATURE_EVENTS.forEach((event) => {
+        expect(dataLayer.addListener).toHaveBeenCalledWith(event, expect.any(Function))
+      })
+    })
+
+    it('should register both mouse and feature events together', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+      const allEvents = [...DATA_MOUSE_EVENTS, ...DATA_FEATURE_EVENTS]
+
+      allEvents.forEach((event) => {
+        dataLayer.addListener(event, vi.fn())
+      })
+
+      expect(dataLayer.addListener).toHaveBeenCalledTimes(allEvents.length)
+    })
+  })
+
+  describe('cleanup', () => {
+    it('should clear instance listeners and detach from map on cleanup', () => {
+      const dataLayer = new mocks.mockMapsApi.Data({ map: {} })
+
+      mocks.mockMapsApi.event.clearInstanceListeners(dataLayer)
+      dataLayer.setMap(null)
+
+      expect(mocks.mockMapsApi.event.clearInstanceListeners).toHaveBeenCalledWith(dataLayer)
+      expect(dataLayer.setMap).toHaveBeenCalledWith(null)
+    })
+  })
+
+  describe('lifecycle Simulation', () => {
+    it('should simulate complete GeoJson lifecycle with object source', () => {
+      const dataLayer = simulateGeoJsonLifecycle(mocks, TEST_OPTIONS.geoJson, { fillColor: 'red' })
+
+      expect(mocks.mockMapsApi.Data).toHaveBeenCalled()
+      expect(dataLayer.setStyle).toHaveBeenCalledWith({ fillColor: 'red' })
+      expect(dataLayer.addGeoJson).toHaveBeenCalledWith(TEST_OPTIONS.geoJson)
+      expect(dataLayer.addListener).toHaveBeenCalledWith('click', expect.any(Function))
+      expect(dataLayer.addListener).toHaveBeenCalledWith('addfeature', expect.any(Function))
+      expect(dataLayer.setMap).toHaveBeenCalledWith(null)
+      expect(mocks.mockMapsApi.event.clearInstanceListeners).toHaveBeenCalledWith(dataLayer)
+    })
+
+    it('should simulate complete GeoJson lifecycle with URL source', () => {
+      const url = 'https://example.com/data.geojson'
+      const dataLayer = simulateGeoJsonLifecycle(mocks, url)
+
+      expect(mocks.mockMapsApi.Data).toHaveBeenCalled()
+      expect(dataLayer.loadGeoJson).toHaveBeenCalledWith(url)
+      expect(dataLayer.addGeoJson).not.toHaveBeenCalled()
+      expect(dataLayer.setStyle).not.toHaveBeenCalled()
+      expect(dataLayer.setMap).toHaveBeenCalledWith(null)
+    })
+  })
+})

From 2585f777c27c26f9b31161de87e25535479d7840 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 19 Mar 2026 23:33:55 +1100
Subject: [PATCH 3/8] fix: resolve type error in GeoJson feature event emit

---
 src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
index ebfaf77c..2a73218d 100644
--- a/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
+++ b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
@@ -77,7 +77,7 @@ function setupEventListeners(layer: google.maps.Data) {
     layer.addListener(event, (payload: google.maps.Data.MouseEvent) => emit(event, payload))
   })
   featureEvents.forEach((event) => {
-    layer.addListener(event, (payload: any) => emit(event, payload))
+    layer.addListener(event, (payload: any) => (emit as any)(event, payload))
   })
 }
 </script>

From b90d10a2b3cc94c58c6fa7a329226e7f877638eb Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Thu, 19 Mar 2026 23:50:49 +1100
Subject: [PATCH 4/8] docs: add ScriptGoogleMapsGeoJson to Google Maps
 documentation

---
 docs/content/scripts/google-maps.md | 80 +++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/docs/content/scripts/google-maps.md b/docs/content/scripts/google-maps.md
index 223e9272..a2ad5b5a 100644
--- a/docs/content/scripts/google-maps.md
+++ b/docs/content/scripts/google-maps.md
@@ -11,6 +11,10 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptGoogleMaps.vue
     size: xs
+  - label: "<ScriptGoogleMapsGeoJson>"
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
+    size: xs
 
 ---
 
@@ -434,6 +438,7 @@ All Google Maps SFC components must work within a `<ScriptGoogleMaps>`{lang="htm
 - `<ScriptGoogleMapsPolyline>`{lang="html"} - Line paths
 - `<ScriptGoogleMapsRectangle>`{lang="html"} - Rectangular overlays
 - `<ScriptGoogleMapsHeatmapLayer>`{lang="html"} - Heatmap visualization
+- `<ScriptGoogleMapsGeoJson>`{lang="html"} - GeoJSON data layers
 
 ### Basic Usage
 
@@ -521,6 +526,48 @@ onMounted(() => {
 </template>
 ```
 
+**GeoJSON Data Layer**
+
+Load GeoJSON from a URL or inline object and apply custom styling:
+
+```vue
+<script setup>
+const geoJsonStyle = {
+  fillColor: '#4285F4',
+  fillOpacity: 0.4,
+  strokeColor: '#4285F4',
+  strokeWeight: 2,
+}
+
+function handleFeatureClick(event: google.maps.Data.MouseEvent) {
+  console.log('Clicked feature:', event.feature.getProperty('name'))
+}
+</script>
+
+<template>
+  <ScriptGoogleMaps api-key="your-api-key">
+    <!-- Load from URL -->
+    <ScriptGoogleMapsGeoJson
+      src="https://example.com/data.geojson"
+      :style="geoJsonStyle"
+      @click="handleFeatureClick"
+    />
+
+    <!-- Or pass inline GeoJSON -->
+    <ScriptGoogleMapsGeoJson
+      :src="{
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [150.644, -34.397] },
+          properties: { name: 'My Point' },
+        }],
+      }"
+    />
+  </ScriptGoogleMaps>
+</template>
+```
+
 ### Component Hierarchy
 
 ```text
@@ -531,11 +578,16 @@ ScriptGoogleMaps (root)
 ├── ScriptGoogleMapsAdvancedMarkerElement
 │   ├── ScriptGoogleMapsPinElement (optional)
 │   └── ScriptGoogleMapsInfoWindow (optional)
+├── ScriptGoogleMapsGeoJson (GeoJSON data layer)
 └── ScriptGoogleMapsCircle / Polygon / Polyline / Rectangle / HeatmapLayer
 ```
 
 All SFC components accept an `options` prop matching their Google Maps API options type (excluding `map`, which the parent component injects automatically). Options are reactive - changes update the basic Google Maps object. Components clean up automatically on unmount.
 
+::callout
+`ScriptGoogleMapsGeoJson` uses `src` and `style` props instead of the `options` pattern used by other SFC components.
+::
+
 ### Component Reference
 
 | Component | Options Type | Notes |
@@ -550,6 +602,34 @@ All SFC components accept an `options` prop matching their Google Maps API optio
 | `ScriptGoogleMapsPolyline` | `google.maps.PolylineOptions` | |
 | `ScriptGoogleMapsRectangle` | `google.maps.RectangleOptions` | |
 | `ScriptGoogleMapsHeatmapLayer` | `google.maps.visualization.HeatmapLayerOptions` | |
+| `ScriptGoogleMapsGeoJson` | `src`: `string \| object`, `style`: `google.maps.Data.StyleOptions` | Emits mouse & feature events |
+
+### `ScriptGoogleMapsGeoJson`{lang="html"}
+
+Loads GeoJSON data onto the map using `google.maps.Data`. Wraps `loadGeoJson` (URL string) and `addGeoJson` (inline object).
+
+#### Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `src` | `string \| object` | URL to load via `loadGeoJson()`{lang="ts"} or a GeoJSON object to add via `addGeoJson()`{lang="ts"}. Reactive - changing it clears existing features and loads the new data. |
+| `style` | `google.maps.Data.StylingFunction \| google.maps.Data.StyleOptions` | Styling applied to the data layer. Reactive with deep watching. |
+
+#### Events
+
+**Mouse events**: emitted with a `google.maps.Data.MouseEvent` payload:
+
+`click`, `contextmenu`, `dblclick`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, `mouseup`
+
+**Feature lifecycle events:**
+
+| Event | Payload |
+|---|---|
+| `addfeature` | `google.maps.Data.AddFeatureEvent` |
+| `removefeature` | `google.maps.Data.RemoveFeatureEvent` |
+| `setgeometry` | `google.maps.Data.SetGeometryEvent` |
+| `setproperty` | `google.maps.Data.SetPropertyEvent` |
+| `removeproperty` | `google.maps.Data.RemovePropertyEvent` |
 
 ## [`useScriptGoogleMaps()`{lang="ts"}](/scripts/google-maps){lang="ts"}
 

From f6c2243ebea6c19139c7f6332fa65096bf2dce68 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 20 Mar 2026 00:45:44 +1100
Subject: [PATCH 5/8] fix: address PR review comments and fix lockfile

- Add `lang="ts"` to GeoJSON example script tag
- Update style prop type to include StylingFunction union in docs
- Regenerate lockfile for catalog: specifiers
---
 docs/content/scripts/google-maps.md |  4 ++--
 pnpm-lock.yaml                      | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/content/scripts/google-maps.md b/docs/content/scripts/google-maps.md
index a2ad5b5a..00b49dfa 100644
--- a/docs/content/scripts/google-maps.md
+++ b/docs/content/scripts/google-maps.md
@@ -531,7 +531,7 @@ onMounted(() => {
 Load GeoJSON from a URL or inline object and apply custom styling:
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const geoJsonStyle = {
   fillColor: '#4285F4',
   fillOpacity: 0.4,
@@ -602,7 +602,7 @@ All SFC components accept an `options` prop matching their Google Maps API optio
 | `ScriptGoogleMapsPolyline` | `google.maps.PolylineOptions` | |
 | `ScriptGoogleMapsRectangle` | `google.maps.RectangleOptions` | |
 | `ScriptGoogleMapsHeatmapLayer` | `google.maps.visualization.HeatmapLayerOptions` | |
-| `ScriptGoogleMapsGeoJson` | `src`: `string \| object`, `style`: `google.maps.Data.StyleOptions` | Emits mouse & feature events |
+| `ScriptGoogleMapsGeoJson` | `src`: `string \| object`, `style`: `google.maps.Data.StylingFunction \| google.maps.Data.StyleOptions` | Emits mouse & feature events |
 
 ### `ScriptGoogleMapsGeoJson`{lang="html"}
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 307c2973..b8c49319 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,9 @@ catalogs:
     '@paypal/paypal-js':
       specifier: ^9.4.0
       version: 9.4.0
+    '@types/jest-image-snapshot':
+      specifier: ^6.4.1
+      version: 6.4.1
     '@types/semver':
       specifier: ^7.7.1
       version: 7.7.1
@@ -66,6 +69,9 @@ catalogs:
     happy-dom:
       specifier: ^20.8.4
       version: 20.8.4
+    jest-image-snapshot:
+      specifier: ^6.5.2
+      version: 6.5.2
     knitwork:
       specifier: ^1.3.0
       version: 1.3.0
@@ -244,7 +250,7 @@ importers:
         specifier: 'catalog:'
         version: 9.4.0
       '@types/jest-image-snapshot':
-        specifier: ^6.4.1
+        specifier: 'catalog:'
         version: 6.4.1
       '@types/semver':
         specifier: 'catalog:'
@@ -271,7 +277,7 @@ importers:
         specifier: 'catalog:'
         version: 20.8.4
       jest-image-snapshot:
-        specifier: ^6.5.2
+        specifier: 'catalog:'
         version: 6.5.2
       knitwork:
         specifier: 'catalog:'

From da3d5f136545a881a87a2c0c9b2b00ee889cf5f2 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 20 Mar 2026 00:56:05 +1100
Subject: [PATCH 6/8] fix: update bundle hash snapshot after adding GeoJson
 component

---
 test/e2e/base.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/base.test.ts b/test/e2e/base.test.ts
index 95722af3..87aa2792 100644
--- a/test/e2e/base.test.ts
+++ b/test/e2e/base.test.ts
@@ -20,6 +20,6 @@ describe('base', async () => {
     await page.waitForTimeout(500)
     // get content of #script-src
     const text = await page.$eval('#script-src', el => el.textContent)
-    expect(text).toMatchInlineSnapshot(`"/foo/_scripts/assets/6bEy8slcRmYcRT4E2QbQZ1CMyWw9PpHA7L87BtvSs2U.js"`)
+    expect(text).toMatchInlineSnapshot(`"/foo/_scripts/assets/PHzhM8DFXcXVSSJF110cyV3pjg9cp8oWv_f4Dk2ax1w.js"`)
   })
 })

From 8b5d6dcb2f1fb4cf380ab59379efe1e5ebed96f7 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 20 Mar 2026 01:27:33 +1100
Subject: [PATCH 7/8] Update docs/content/scripts/google-maps.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>
---
 docs/content/scripts/google-maps.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/scripts/google-maps.md b/docs/content/scripts/google-maps.md
index 00b49dfa..16b93de8 100644
--- a/docs/content/scripts/google-maps.md
+++ b/docs/content/scripts/google-maps.md
@@ -606,7 +606,7 @@ All SFC components accept an `options` prop matching their Google Maps API optio
 
 ### `ScriptGoogleMapsGeoJson`{lang="html"}
 
-Loads GeoJSON data onto the map using `google.maps.Data`. Wraps `loadGeoJson` (URL string) and `addGeoJson` (inline object).
+Loads GeoJSON data onto the map using `google.maps.Data` and either `loadGeoJson` (when `src` is a URL) or `addGeoJson` (when `src` is an inline object).
 
 #### Props
 

From 825bc84d856c7c70d56a1865e9aa9bdf75436503 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 20 Mar 2026 01:29:57 +1100
Subject: [PATCH 8/8] fix: address reviewer feedback on GeoJson docs and
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove GeoJson frontmatter link (not needed)
- "All SFC components" → "Most" with inline exception note
- Reword GeoJson description per reviewer suggestion
- Style watcher resets to default when prop removed
---
 docs/content/scripts/google-maps.md                    | 10 +---------
 .../components/GoogleMaps/ScriptGoogleMapsGeoJson.vue  |  4 ++--
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/docs/content/scripts/google-maps.md b/docs/content/scripts/google-maps.md
index 16b93de8..ca825a0f 100644
--- a/docs/content/scripts/google-maps.md
+++ b/docs/content/scripts/google-maps.md
@@ -11,10 +11,6 @@ links:
     icon: i-simple-icons-github
     to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptGoogleMaps.vue
     size: xs
-  - label: "<ScriptGoogleMapsGeoJson>"
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
-    size: xs
 
 ---
 
@@ -582,11 +578,7 @@ ScriptGoogleMaps (root)
 └── ScriptGoogleMapsCircle / Polygon / Polyline / Rectangle / HeatmapLayer
 ```
 
-All SFC components accept an `options` prop matching their Google Maps API options type (excluding `map`, which the parent component injects automatically). Options are reactive - changes update the basic Google Maps object. Components clean up automatically on unmount.
-
-::callout
-`ScriptGoogleMapsGeoJson` uses `src` and `style` props instead of the `options` pattern used by other SFC components.
-::
+Most SFC components accept an `options` prop matching their Google Maps API options type (excluding `map`, which the parent component injects automatically). `ScriptGoogleMapsGeoJson` uses `src` and `style` props instead. Options are reactive - changes update the basic Google Maps object. Components clean up automatically on unmount.
 
 ### Component Reference
 
diff --git a/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
index 2a73218d..944a8c4b 100644
--- a/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
+++ b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
@@ -68,8 +68,8 @@ watch(() => props.src, (src) => {
 })
 
 watch(() => props.style, (style) => {
-  if (dataLayer.value && style)
-    dataLayer.value.setStyle(style)
+  if (dataLayer.value)
+    dataLayer.value.setStyle(style ?? {})
 }, { deep: true })
 
 function setupEventListeners(layer: google.maps.Data) {