diff --git a/docs/content/scripts/google-maps.md b/docs/content/scripts/google-maps.md
index 223e9272..ca825a0f 100644
--- a/docs/content/scripts/google-maps.md
+++ b/docs/content/scripts/google-maps.md
@@ -434,6 +434,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 +522,48 @@ onMounted(() => {
 </template>
 ```
 
+**GeoJSON Data Layer**
+
+Load GeoJSON from a URL or inline object and apply custom styling:
+
+```vue
+<script setup lang="ts">
+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,10 +574,11 @@ 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.
+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
 
@@ -550,6 +594,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.StylingFunction \| google.maps.Data.StyleOptions` | Emits mouse & feature events |
+
+### `ScriptGoogleMapsGeoJson`{lang="html"}
+
+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
+
+| 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"}
 
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/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue b/src/runtime/components/GoogleMaps/ScriptGoogleMapsGeoJson.vue
new file mode 100644
index 00000000..944a8c4b
--- /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)
+    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 as any)(event, payload))
+  })
+}
+</script>
+
+<template>
+</template>
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"`)
   })
 })
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)
+    })
+  })
+})