diff --git a/eslint.config.js b/eslint.config.js
index 44406c9a..8c20720a 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -36,6 +36,7 @@ export default createConfigForNuxt({
       'vue/no-multiple-template-root': 'off',
       // NOTE: Disable this style rules if stylistic is not enabled
       'vue/max-attributes-per-line': 'off',
+      'vue/valid-template-root': 'off',
     },
   })
   .append({
diff --git a/package.json b/package.json
index 4856e9cb..52222b08 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     ]
   },
   "dependencies": {
+    "@googlemaps/markerclusterer": "^2.5.3",
     "@nuxt/devtools-kit": "^1.5.1",
     "@nuxt/devtools-ui-kit": "^1.5.1",
     "@nuxt/kit": "^3.13.2",
diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue
new file mode 100644
index 00000000..cf58f3fb
--- /dev/null
+++ b/playground/pages/third-parties/google-maps/sfcs.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import { ref, useTemplateRef } from 'vue'
+
+const isInfoWindowShown = ref(false)
+
+const isMarkerShown = ref(false)
+
+const markerOptions = ref({
+  position: { lat: -33.8688, lng: 151.2093 },
+})
+
+const isAdvancedMarkerElementShown = ref(false)
+
+const isAdvancedMarkerElementWithPinElementShown = ref(false)
+
+const isMarkerClustererShown = ref(false)
+
+const markers = [
+  { position: { lat: -33.8688, lng: 151.2093 } },
+  { position: { lat: -33.8690, lng: 151.2100 } },
+  { position: { lat: -33.8700, lng: 151.2150 } },
+  { position: { lat: -33.8710, lng: 151.2200 } },
+  { position: { lat: -33.8720, lng: 151.2250 } },
+]
+
+const isRectangleShown = ref(false)
+
+const isPolylineShown = ref(false)
+
+const isPolygonShown = ref(false)
+
+const isHeatmapLayerShown = ref(false)
+
+const heatmapLayerData = ref<google.maps.LatLng[]>([])
+
+const isCircleShown = ref(false)
+
+const googleMapsRef = useTemplateRef('googleMapsRef')
+
+whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => {
+  heatmapLayerData.value.push(...[
+    new googleMaps.LatLng(-33.8688, 151.2093),
+    new googleMaps.LatLng(-33.8690, 151.2100),
+    new googleMaps.LatLng(-33.8700, 151.2150),
+    new googleMaps.LatLng(-33.8710, 151.2200),
+    new googleMaps.LatLng(-33.8720, 151.2250),
+    new googleMaps.LatLng(-33.8730, 151.2300),
+    new googleMaps.LatLng(-33.8740, 151.2350),
+    new googleMaps.LatLng(-33.8750, 151.2400),
+    new googleMaps.LatLng(-33.8760, 151.2450),
+    new googleMaps.LatLng(-33.8770, 151.2500),
+    new googleMaps.LatLng(-33.8780, 151.2550),
+    new googleMaps.LatLng(-33.8790, 151.2600),
+    new googleMaps.LatLng(-33.8800, 151.2650),
+    new googleMaps.LatLng(-33.8810, 151.2700),
+  ])
+})
+</script>
+
+<template>
+  <div>
+    <ScriptGoogleMaps
+      ref="googleMapsRef"
+      api-key="AIzaSyAOEIQ_xOdLx2dNwnFMzyJoswwvPCTcGzU"
+      :width="1280"
+      :height="720"
+      above-the-fold
+      :map-options="{
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 8,
+        mapId: 'DEMO_MAP_ID',
+      }"
+    >
+      <ScriptGoogleMapsInfoWindow
+        v-if="isInfoWindowShown"
+        :options="{ position: { lat: -33.8688, lng: 151.2093 } }"
+      >
+        <div>
+          info window content
+        </div>
+      </ScriptGoogleMapsInfoWindow>
+
+      <ScriptGoogleMapsMarker
+        v-if="isMarkerShown"
+        :options="markerOptions"
+      >
+        <ScriptGoogleMapsInfoWindow>
+          info window content
+        </ScriptGoogleMapsInfoWindow>
+      </ScriptGoogleMapsMarker>
+
+      <ScriptGoogleMapsAdvancedMarkerElement
+        v-if="isAdvancedMarkerElementShown"
+        :options="{
+          position: { lat: -33.8688, lng: 151.2093 },
+        }"
+      >
+        <ScriptGoogleMapsInfoWindow>
+          info window content
+        </ScriptGoogleMapsInfoWindow>
+      </ScriptGoogleMapsAdvancedMarkerElement>
+
+      <ScriptGoogleMapsAdvancedMarkerElement
+        v-if="isAdvancedMarkerElementWithPinElementShown"
+        :options="{
+          position: { lat: -33.8688, lng: 151.2093 },
+        }"
+      >
+        <ScriptGoogleMapsPinElement
+          :options="{
+            scale: 1.5,
+          }"
+        />
+
+        <ScriptGoogleMapsInfoWindow>
+          info window content
+        </ScriptGoogleMapsInfoWindow>
+      </ScriptGoogleMapsAdvancedMarkerElement>
+
+      <ScriptGoogleMapsMarkerClusterer v-if="isMarkerClustererShown">
+        <ScriptGoogleMapsMarker
+          v-for="marker in markers"
+          :key="marker.position.lat + marker.position.lng"
+          :options="{ position: marker.position }"
+        >
+          <ScriptGoogleMapsInfoWindow>
+            info window content
+          </ScriptGoogleMapsInfoWindow>
+        </ScriptGoogleMapsMarker>
+      </ScriptGoogleMapsMarkerClusterer>
+
+      <ScriptGoogleMapsRectangle
+        v-if="isRectangleShown"
+        :options="{
+          bounds: {
+            north: -33.85,
+            south: -33.90,
+            east: 151.25,
+            west: 151.20,
+          },
+          editable: true,
+          draggable: true,
+        }"
+      />
+
+      <ScriptGoogleMapsPolyline
+        v-if="isPolylineShown"
+        :options="{
+          path: [
+            { lat: -33.8688, lng: 151.2093 },
+            { lat: -33.8700, lng: 151.2200 },
+            { lat: -33.8750, lng: 151.2300 },
+            { lat: -33.8800, lng: 151.2400 },
+            { lat: -33.8850, lng: 151.2500 },
+          ],
+          geodesic: true,
+          strokeColor: '#FF0000',
+          strokeOpacity: 1.0,
+          strokeWeight: 2,
+        }"
+      />
+
+      <ScriptGoogleMapsPolygon
+        v-if="isPolygonShown"
+        :options="{
+          paths: [
+            { lat: -33.8688, lng: 151.2093 },
+            { lat: -33.8700, lng: 151.2200 },
+            { lat: -33.8750, lng: 151.2300 },
+            { lat: -33.8800, lng: 151.2400 },
+            { lat: -33.8850, lng: 151.2500 },
+            { lat: -33.8900, lng: 151.2600 },
+            { lat: -33.8950, lng: 151.2700 },
+            { lat: -33.9000, lng: 151.2800 },
+            { lat: -33.9050, lng: 151.2900 },
+            { lat: -33.9100, lng: 151.3000 },
+          ],
+          strokeColor: '#FF0000',
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: '#FF0000',
+          fillOpacity: 0.35,
+        }"
+      />
+
+      <ScriptGoogleMapsHeatmapLayer
+        v-if="isHeatmapLayerShown"
+        :options="{
+          data: heatmapLayerData,
+        }"
+      />
+
+      <ScriptGoogleMapsCircle
+        v-if="isCircleShown"
+        :options="{
+          center: { lat: -33.8688, lng: 151.2093 },
+          radius: 1000,
+          strokeColor: '#FF0000',
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: '#FF0000',
+          fillOpacity: 0.35,
+        }"
+      />
+    </ScriptGoogleMaps>
+
+    <div class="my-5 flex gap-5 flex-wrap">
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isInfoWindowShown = !isInfoWindowShown"
+      >
+        {{ `${isInfoWindowShown ? 'Hide' : 'Show'} info window` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isMarkerShown = !isMarkerShown"
+      >
+        {{ `${isMarkerShown ? 'Hide' : 'Show'} marker` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isAdvancedMarkerElementShown = !isAdvancedMarkerElementShown"
+      >
+        {{ `${isAdvancedMarkerElementShown ? 'Hide' : 'Show'} advanced marker element` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isAdvancedMarkerElementWithPinElementShown = !isAdvancedMarkerElementWithPinElementShown"
+      >
+        {{ `${isAdvancedMarkerElementWithPinElementShown ? 'Hide' : 'Show'} advanced marker element with pin element` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isMarkerClustererShown = !isMarkerClustererShown"
+      >
+        {{ `${isMarkerClustererShown ? 'Hide' : 'Show'} marker clusterer` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isRectangleShown = !isRectangleShown"
+      >
+        {{ `${isRectangleShown ? 'Hide' : 'Show'} rectangle` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isPolylineShown = !isPolylineShown"
+      >
+        {{ `${isPolylineShown ? 'Hide' : 'Show'} polyline` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isPolygonShown = !isPolygonShown"
+      >
+        {{ `${isPolygonShown ? 'Hide' : 'Show'} polygon` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isHeatmapLayerShown = !isHeatmapLayerShown"
+      >
+        {{ `${isHeatmapLayerShown ? 'Hide' : 'Show'} heatmap layer` }}
+      </button>
+
+      <button
+        class="bg-[#ffa500] rounded-lg px-2 py-1"
+        @click="isCircleShown = !isCircleShown"
+      >
+        {{ `${isCircleShown ? 'Hide' : 'Show'} circle` }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de5d3ce8..d74dda05 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ importers:
 
   .:
     dependencies:
+      '@googlemaps/markerclusterer':
+        specifier: ^2.5.3
+        version: 2.5.3
       '@nuxt/devtools-kit':
         specifier: ^1.5.1
         version: 1.6.0(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)
@@ -90,7 +93,7 @@ importers:
         version: 3.7.0
       third-party-capital:
         specifier: 2.3.0
-        version: 3.0.0
+        version: 2.3.0
       ufo:
         specifier: ^1.5.4
         version: 1.5.4
@@ -175,7 +178,7 @@ importers:
         version: 1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)
       '@nuxt/devtools-ui-kit':
         specifier: ^1.6.0
-        version: 1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))
+        version: 1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))
       '@nuxt/kit':
         specifier: ^3.13.2
         version: 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
@@ -205,7 +208,7 @@ importers:
         version: 2.13.3(ioredis@5.4.1)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
       '@nuxt/fonts':
         specifier: ^0.9.2
-        version: 0.10.0(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)
+        version: 0.9.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)
       '@nuxt/image':
         specifier: ^1.8.0
         version: 1.8.1(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
@@ -1321,6 +1324,9 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@googlemaps/markerclusterer@2.5.3':
+    resolution: {integrity: sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==}
+
   '@headlessui/tailwindcss@0.2.1':
     resolution: {integrity: sha512-2+5+NZ+RzMyrVeCZOxdbvkUSssSxGvcUxphkIfSVLpRiKsj+/63T2TOL9dBYMXVfj/CGr6hMxSRInzXv6YY7sA==}
     engines: {node: '>=10'}
@@ -1509,8 +1515,8 @@ packages:
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
 
-  '@nuxt/fonts@0.10.0':
-    resolution: {integrity: sha512-VoK/rssN1PzMeQOplap8UYnbKtI6IDaI+sj5BmbCCpXRYY84gH8m+zePGRo88Mi9ujRhd1HUOXfsCvHN88iGmQ==}
+  '@nuxt/fonts@0.9.2':
+    resolution: {integrity: sha512-RMekoJh5AIaKG3tu0YaCdru3eTqNdXn6v7ggh5cdG4rWugr59HzihZ6n4C2Pkkv6nxOP4DOhxxdOwcZwXZM5vQ==}
 
   '@nuxt/icon@1.5.6':
     resolution: {integrity: sha512-7l99CWc/laHphSsoLikh99Hkwjv+59cwAMJ0f9eZddBV+vO7zLGWwocH/TDNjlX0IACgVoG+AfbP/p1fqlLKpg==}
@@ -2360,10 +2366,6 @@ packages:
     resolution: {integrity: sha512-XKudKxxW8P44JvlIdS6HBpfE3qZA9rhbemy6/sb8HyZjKYjgeM9jx5yjk+9+4hXNma/KlwDXwjAqY29z0S0SrA==}
     engines: {node: '>=14'}
 
-  '@unocss/config@0.63.4':
-    resolution: {integrity: sha512-LfAzM8z0r2comUW94KaSo4JaaEZjPkvrfyVWfO/hyaXa+/xSVIkCTW7+lfWh77hrg1e2SUY1HEvIFBg9Jvb1xQ==}
-    engines: {node: '>=14'}
-
   '@unocss/core@0.62.4':
     resolution: {integrity: sha512-Cc+Vo6XlaQpyVejkJrrzzWtiK9pgMWzVVBpm9VCVtwZPUjD4GSc+g7VQCPXSsr7m03tmSuRySJx72QcASmauNQ==}
 
@@ -2451,11 +2453,6 @@ packages:
     peerDependencies:
       webpack: ^4 || ^5
 
-  '@unocss/webpack@0.63.4':
-    resolution: {integrity: sha512-voDSHXbhmaJzYRohHHhSvKc73O3vh4F140wFrxbvPL5ujIXEfrF5ItV7y/2Kl0XHp5J6ytl6PyCsubIetsMlKw==}
-    peerDependencies:
-      webpack: ^4 || ^5
-
   '@vercel/nft@0.26.5':
     resolution: {integrity: sha512-NHxohEqad6Ra/r4lGknO52uc/GrWILXAMs1BB4401GTqww0fw1bAqzpG1XHuDO+dprg4GvsD9ZLLSsdo78p9hQ==}
     engines: {node: '>=16'}
@@ -4467,6 +4464,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+
   keygrip@1.1.0:
     resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==}
     engines: {node: '>= 0.6'}
@@ -6048,6 +6048,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+
   superjson@2.2.1:
     resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
     engines: {node: '>=16'}
@@ -6166,8 +6169,8 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  third-party-capital@3.0.0:
-    resolution: {integrity: sha512-zCrYkb4lnFTpsz0cyZ7c3q9aqQ5zX4po1Gy4utqOf8UkIV9Jx45P8ty6kpF1gLVvfkfNB36nEKv3isQhJv7Ftw==}
+  third-party-capital@2.3.0:
+    resolution: {integrity: sha512-p4rGOF4JCkI18HH3a1Vfd89Mg37TLlAsGmePBt20MA52frviYSBE6ToGOmTpqRC4EIlS5/4Owv6TpegFJUSkOg==}
 
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
@@ -6362,9 +6365,6 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
-  unifont@0.1.3:
-    resolution: {integrity: sha512-PZVkmHSUTgeinSIYEJ58lEzk4FTh8wZt9rd+5EapupFQLFXqOq9OPIp+e6a3JE404duS5qgSHvfGEg+cJ42lPA==}
-
   unimport@3.12.0:
     resolution: {integrity: sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==}
 
@@ -7826,6 +7826,11 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@googlemaps/markerclusterer@2.5.3':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      supercluster: 8.0.1
+
   '@headlessui/tailwindcss@0.2.1(tailwindcss@3.4.14)':
     dependencies:
       tailwindcss: 3.4.14
@@ -8185,7 +8190,7 @@ snapshots:
       - webpack
       - webpack-sources
 
-  '@nuxt/devtools-ui-kit@1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))':
+  '@nuxt/devtools-ui-kit@1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))':
     dependencies:
       '@iconify-json/carbon': 1.2.3
       '@iconify-json/logos': 1.2.3
@@ -8206,7 +8211,7 @@ snapshots:
       defu: 6.1.4
       focus-trap: 7.6.0
       splitpanes: 3.1.5
-      unocss: 0.62.4(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))
+      unocss: 0.62.4(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))
       v-lazy-show: 0.2.4(@vue/compiler-core@3.5.12)
     transitivePeerDependencies:
       - '@unocss/webpack'
@@ -8531,7 +8536,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/fonts@0.10.0(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)':
+  '@nuxt/fonts@0.9.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3)
@@ -8541,7 +8546,7 @@ snapshots:
       esbuild: 0.24.0
       fontaine: 0.5.0(webpack-sources@3.2.3)
       h3: 1.13.0
-      jiti: 2.3.3
+      jiti: 1.21.6
       magic-regexp: 0.8.0(webpack-sources@3.2.3)
       magic-string: 0.30.12
       node-fetch-native: 1.6.4
@@ -8550,7 +8555,6 @@ snapshots:
       sirv: 2.0.4
       tinyglobby: 0.2.9
       ufo: 1.5.4
-      unifont: 0.1.3
       unplugin: 1.14.1(webpack-sources@3.2.3)
       unstorage: 1.12.0(ioredis@5.4.1)
     transitivePeerDependencies:
@@ -10080,14 +10084,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@unocss/config@0.63.4':
-    dependencies:
-      '@unocss/core': 0.63.4
-      unconfig: 0.5.5
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@unocss/core@0.62.4': {}
 
   '@unocss/core@0.63.4': {}
@@ -10317,23 +10313,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1))':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@rollup/pluginutils': 5.1.2(rollup@4.24.0)
-      '@unocss/config': 0.63.4
-      '@unocss/core': 0.63.4
-      chokidar: 3.6.0
-      magic-string: 0.30.12
-      tinyglobby: 0.2.9
-      unplugin: 1.14.1(webpack-sources@3.2.3)
-      webpack: 5.95.0(esbuild@0.23.1)
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - rollup
-      - supports-color
-    optional: true
-
   '@vercel/nft@0.26.5':
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11
@@ -12870,6 +12849,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  kdbush@4.0.2: {}
+
   keygrip@1.1.0:
     dependencies:
       tsscmp: 1.0.6
@@ -15379,6 +15360,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  supercluster@8.0.1:
+    dependencies:
+      kdbush: 4.0.2
+
   superjson@2.2.1:
     dependencies:
       copy-anything: 3.0.5
@@ -15545,7 +15530,7 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  third-party-capital@3.0.0:
+  third-party-capital@2.3.0:
     dependencies:
       semver: 7.6.3
 
@@ -15745,11 +15730,6 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
-  unifont@0.1.3:
-    dependencies:
-      css-tree: 3.0.0
-      ohash: 1.1.4
-
   unimport@3.12.0(rollup@4.21.3)(webpack-sources@3.2.3):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.21.3)
@@ -15909,33 +15889,6 @@ snapshots:
       - rollup
       - supports-color
 
-  unocss@0.62.4(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)):
-    dependencies:
-      '@unocss/astro': 0.62.4(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))
-      '@unocss/cli': 0.62.4(rollup@4.24.0)
-      '@unocss/core': 0.62.4
-      '@unocss/postcss': 0.62.4(postcss@8.4.47)
-      '@unocss/preset-attributify': 0.62.4
-      '@unocss/preset-icons': 0.62.4
-      '@unocss/preset-mini': 0.62.4
-      '@unocss/preset-tagify': 0.62.4
-      '@unocss/preset-typography': 0.62.4
-      '@unocss/preset-uno': 0.62.4
-      '@unocss/preset-web-fonts': 0.62.4
-      '@unocss/preset-wind': 0.62.4
-      '@unocss/transformer-attributify-jsx': 0.62.4
-      '@unocss/transformer-compile-class': 0.62.4
-      '@unocss/transformer-directives': 0.62.4
-      '@unocss/transformer-variant-group': 0.62.4
-      '@unocss/vite': 0.62.4(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))
-    optionalDependencies:
-      '@unocss/webpack': 0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1))
-      vite: 5.4.8(@types/node@22.7.5)(terser@5.34.1)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-
   unplugin-ast@0.10.0(rollup@4.24.0)(webpack-sources@3.2.3):
     dependencies:
       '@antfu/utils': 0.7.10
diff --git a/src/runtime/components/ScriptGoogleMaps.vue b/src/runtime/components/ScriptGoogleMaps.vue
index 3a073c5f..7fe19f27 100644
--- a/src/runtime/components/ScriptGoogleMaps.vue
+++ b/src/runtime/components/ScriptGoogleMaps.vue
@@ -1,7 +1,7 @@
-<script lang="ts" setup>
+<script lang="ts">
 /// <reference types="google.maps" />
-import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw } from 'vue'
-import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, toRaw, provide, shallowRef } from 'vue'
+import type { HTMLAttributes, ImgHTMLAttributes, InjectionKey, Ref, ReservedProps, ShallowRef } from 'vue'
 import { withQuery } from 'ufo'
 import type { QueryObject } from 'ufo'
 import { defu } from 'defu'
@@ -12,6 +12,13 @@ import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
 import { useScriptGoogleMaps } from '../registry/google-maps'
 import { resolveComponent, useHead } from '#imports'
 
+export const MAP_INJECTION_KEY = Symbol('map') as InjectionKey<{
+  map: ShallowRef<google.maps.Map | undefined>
+  mapsApi: Ref<typeof google.maps | undefined>
+}>
+</script>
+
+<script lang="ts" setup>
 interface PlaceholderOptions {
   width?: string | number
   height?: string | number
@@ -128,7 +135,7 @@ const options = computed(() => {
 })
 const ready = ref(false)
 
-const map: Ref<google.maps.Map | undefined> = ref()
+const map: ShallowRef<google.maps.Map | undefined> = shallowRef()
 const mapMarkers: Ref<Map<string, Promise<google.maps.marker.AdvancedMarkerElement>>> = ref(new Map())
 
 function isLocationQuery(s: string | any) {
@@ -245,6 +252,8 @@ const googleMaps = {
 
 defineExpose(googleMaps)
 
+provide(MAP_INJECTION_KEY, { map, mapsApi })
+
 onMounted(() => {
   watch(ready, (v) => {
     if (v) {
diff --git a/src/runtime/components/ScriptGoogleMapsAdvancedMarkerElement.vue b/src/runtime/components/ScriptGoogleMapsAdvancedMarkerElement.vue
new file mode 100644
index 00000000..d46b317b
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsAdvancedMarkerElement.vue
@@ -0,0 +1,123 @@
+<template>
+  <slot v-if="advancedMarkerElement" />
+</template>
+
+<script lang="ts">
+import type { InjectionKey, ShallowRef } from 'vue'
+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 = Symbol('marker') as InjectionKey<{
+  advancedMarkerElement: ShallowRef<google.maps.marker.AdvancedMarkerElement | undefined>
+}>
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  options?: Omit<google.maps.marker.AdvancedMarkerElementOptions, 'map'>
+}>()
+
+const emit = defineEmits<{
+  (event:
+    | 'animation_changed'
+    | 'clickable_changed'
+    | 'cursor_changed'
+    | 'draggable_changed'
+    | 'flat_changed'
+    | 'icon_changed'
+    | 'position_changed'
+    | 'shape_changed'
+    | 'title_changed'
+    | 'visible_changed'
+    | 'zindex_changed'
+  ): void
+  (event:
+    | 'click'
+    | 'contextmenu'
+    | 'dblclick'
+    | 'drag'
+    | 'dragend'
+    | 'dragstart'
+    | 'mousedown'
+    | 'mouseout'
+    | 'mouseover'
+    | 'mouseup',
+    payload: google.maps.MapMouseEvent
+  ): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined)
+
+const advancedMarkerElement = shallowRef<google.maps.marker.AdvancedMarkerElement | undefined>(undefined)
+
+whenever(() => mapContext?.map.value, async (map) => {
+  await mapContext!.mapsApi.value!.importLibrary('marker')
+
+  advancedMarkerElement.value = new google.maps.marker.AdvancedMarkerElement(props.options)
+
+  setupAdvancedMarkerElementEventListeners(advancedMarkerElement.value)
+
+  if (markerClustererContext?.markerClusterer.value) {
+    markerClustererContext.markerClusterer.value.addMarker(advancedMarkerElement.value)
+  }
+  else {
+    advancedMarkerElement.value.map = map
+  }
+
+  whenever(() => props.options, (options) => {
+    for (const option in options) {
+      advancedMarkerElement.value![option as keyof typeof props.options] = options[option as keyof typeof props.options]
+    }
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!advancedMarkerElement.value) {
+    return
+  }
+
+  google.maps.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(advancedMarkerElement: google.maps.marker.AdvancedMarkerElement) {
+  advancedMarkerElement.addListener('animation_changed', () => emit('animation_changed'))
+  advancedMarkerElement.addListener('clickable_changed', () => emit('clickable_changed'))
+  advancedMarkerElement.addListener('cursor_changed', () => emit('cursor_changed'))
+  advancedMarkerElement.addListener('draggable_changed', () => emit('draggable_changed'))
+  advancedMarkerElement.addListener('flat_changed', () => emit('flat_changed'))
+  advancedMarkerElement.addListener('icon_changed', () => emit('icon_changed'))
+  advancedMarkerElement.addListener('position_changed', () => emit('position_changed'))
+  advancedMarkerElement.addListener('shape_changed', () => emit('shape_changed'))
+  advancedMarkerElement.addListener('title_changed', () => emit('title_changed'))
+  advancedMarkerElement.addListener('visible_changed', () => emit('visible_changed'))
+  advancedMarkerElement.addListener('zindex_changed', () => emit('zindex_changed'))
+
+  advancedMarkerElement.addListener('click', (event: google.maps.MapMouseEvent) => emit('click', event))
+  advancedMarkerElement.addListener('contextmenu', (event: google.maps.MapMouseEvent) => emit('contextmenu', event))
+  advancedMarkerElement.addListener('dblclick', (event: google.maps.MapMouseEvent) => emit('dblclick', event))
+  advancedMarkerElement.addListener('drag', (event: google.maps.MapMouseEvent) => emit('drag', event))
+  advancedMarkerElement.addListener('dragend', (event: google.maps.MapMouseEvent) => emit('dragend', event))
+  advancedMarkerElement.addListener('dragstart', (event: google.maps.MapMouseEvent) => emit('dragstart', event))
+  advancedMarkerElement.addListener('mousedown', (event: google.maps.MapMouseEvent) => emit('mousedown', event))
+  advancedMarkerElement.addListener('mouseout', (event: google.maps.MapMouseEvent) => emit('mouseout', event))
+  advancedMarkerElement.addListener('mouseover', (event: google.maps.MapMouseEvent) => emit('mouseover', event))
+  advancedMarkerElement.addListener('mouseup', (event: google.maps.MapMouseEvent) => emit('mouseup', event))
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsCircle.vue b/src/runtime/components/ScriptGoogleMapsCircle.vue
new file mode 100644
index 00000000..2976f366
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsCircle.vue
@@ -0,0 +1,78 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.CircleOptions, 'map'>
+}>()
+
+const eventsWithoutPayload = [
+  'center_changed',
+  'radius_changed',
+] as const
+
+const eventsWithMapMouseEventPayload = [
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'rightclick',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof eventsWithoutPayload[number]): void
+  (event: typeof eventsWithMapMouseEventPayload[number], payload: google.maps.MapMouseEvent): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+let circle: google.maps.Circle | undefined = undefined
+
+whenever(() => mapContext?.map.value, (map) => {
+  circle = new google.maps.Circle({
+    map,
+    ...props.options,
+  })
+
+  setupCircleEventListeners(circle)
+
+  whenever(() => props.options, (options) => {
+    circle?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!circle) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(circle)
+
+  circle.setMap(null)
+})
+
+function setupCircleEventListeners(circle: google.maps.Circle) {
+  eventsWithoutPayload.forEach((event) => {
+    circle.addListener(event, () => emit(event))
+  })
+
+  eventsWithMapMouseEventPayload.forEach((event) => {
+    circle.addListener(event, (payload: google.maps.MapMouseEvent) => emit(event, payload))
+  })
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue
new file mode 100644
index 00000000..e5afc6f3
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue
@@ -0,0 +1,38 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.visualization.HeatmapLayerOptions, 'map'>
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+let heatmapLayer: google.maps.visualization.HeatmapLayer | undefined = undefined
+
+whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => {
+  await mapContext!.mapsApi.value!.importLibrary('visualization')
+
+  heatmapLayer = new google.maps.visualization.HeatmapLayer({
+    map: mapContext!.map.value!,
+    ...props.options,
+  })
+
+  whenever(() => props.options, (options) => {
+    heatmapLayer?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  heatmapLayer?.setMap(null)
+})
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsInfoWindow.vue b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue
new file mode 100644
index 00000000..612a03dc
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="info-window-container">
+    <div ref="info-window-container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted, useTemplateRef } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MARKER_INJECTION_KEY } from './ScriptGoogleMapsMarker.vue'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './ScriptGoogleMapsAdvancedMarkerElement.vue'
+
+const props = defineProps<{
+  options?: google.maps.InfoWindowOptions
+}>()
+
+const infoWindowEvents = [
+  'close',
+  'closeclick',
+  'content_changed',
+  'domready',
+  'headercontent_changed',
+  'headerdisabled_changed',
+  'position_changed',
+  'visible',
+  'zindex_changed',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof infoWindowEvents[number]): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+const markerContext = inject(MARKER_INJECTION_KEY, undefined)
+const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, undefined)
+
+const infoWindowContainer = useTemplateRef('info-window-container')
+
+let infoWindow: google.maps.InfoWindow | undefined = undefined
+
+whenever(
+  () => mapContext?.map.value
+    && infoWindowContainer.value,
+  () => {
+    infoWindow = new google.maps.InfoWindow({
+      content: infoWindowContainer.value,
+      ...props.options,
+    })
+
+    setupInfoWindowEventListeners(infoWindow)
+
+    if (markerContext?.marker.value) {
+      markerContext.marker.value.addListener('click', () => {
+        infoWindow!.open({
+          anchor: markerContext.marker.value,
+          map: mapContext!.map.value,
+        })
+      })
+    }
+    else if (advancedMarkerElementContext?.advancedMarkerElement.value) {
+      advancedMarkerElementContext.advancedMarkerElement.value.addListener('click', () => {
+        infoWindow!.open({
+          anchor: advancedMarkerElementContext.advancedMarkerElement.value,
+          map: mapContext!.map.value,
+        })
+      })
+    }
+    else {
+      infoWindow.setPosition(props.options?.position)
+
+      infoWindow.open(mapContext?.map.value)
+    }
+
+    whenever(() => props.options, (options) => {
+      infoWindow?.setOptions(options)
+    }, {
+      deep: true,
+    })
+  }, {
+    immediate: true,
+    once: true,
+  })
+
+onUnmounted(() => {
+  if (!infoWindow) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(infoWindow)
+
+  infoWindow.close()
+})
+
+function setupInfoWindowEventListeners(infoWindow: google.maps.InfoWindow) {
+  infoWindowEvents.forEach((event) => {
+    infoWindow.addListener(event, () => emit(event))
+  })
+}
+</script>
+
+<style scoped>
+.info-window-container {
+    display: none;
+}
+</style>
diff --git a/src/runtime/components/ScriptGoogleMapsMarker.vue b/src/runtime/components/ScriptGoogleMapsMarker.vue
new file mode 100644
index 00000000..79550d67
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsMarker.vue
@@ -0,0 +1,107 @@
+<template>
+  <slot v-if="marker" />
+</template>
+
+<script lang="ts">
+import type { InjectionKey, ShallowRef } from 'vue'
+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 MARKER_INJECTION_KEY = Symbol('marker') as InjectionKey<{
+  marker: ShallowRef<google.maps.Marker | undefined>
+}>
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  options?: Omit<google.maps.MarkerOptions, 'map'>
+}>()
+
+const eventsWithoutPayload = [
+  'animation_changed',
+  'clickable_changed',
+  'cursor_changed',
+  'draggable_changed',
+  'flat_changed',
+  'icon_changed',
+  'position_changed',
+  'shape_changed',
+  'title_changed',
+  'visible_changed',
+  'zindex_changed',
+] as const
+
+const eventsWithMapMouseEventPayload = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof eventsWithoutPayload[number]): void
+  (event: typeof eventsWithMapMouseEventPayload[number], payload: google.maps.MapMouseEvent): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined)
+
+const marker = shallowRef<google.maps.Marker | undefined>(undefined)
+
+whenever(() => mapContext?.map.value, (map) => {
+  marker.value = new google.maps.Marker(props.options)
+
+  setupMarkerEventListeners(marker.value)
+
+  if (markerClustererContext?.markerClusterer.value) {
+    markerClustererContext.markerClusterer.value.addMarker(marker.value)
+  }
+  else {
+    marker.value.setMap(map)
+  }
+
+  whenever(() => props.options, (options) => {
+    marker.value?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!marker.value) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(marker.value)
+
+  if (markerClustererContext) {
+    markerClustererContext.markerClusterer.value?.removeMarker(marker.value)
+  }
+  else {
+    marker.value.setMap(null)
+  }
+})
+
+provide(MARKER_INJECTION_KEY, { marker })
+
+function setupMarkerEventListeners(marker: google.maps.Marker) {
+  eventsWithoutPayload.forEach((event) => {
+    marker.addListener(event, () => emit(event))
+  })
+
+  eventsWithMapMouseEventPayload.forEach((event) => {
+    marker.addListener(event, (payload: google.maps.MapMouseEvent) => emit(event, payload))
+  })
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue
new file mode 100644
index 00000000..c4428cb2
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue
@@ -0,0 +1,64 @@
+<template>
+  <slot v-if="markerClusterer" />
+</template>
+
+<script lang="ts">
+import { MarkerClusterer, type MarkerClustererOptions } from '@googlemaps/markerclusterer'
+import { inject, onUnmounted, provide, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+export const MARKER_CLUSTERER_INJECTION_KEY = Symbol('marker-clusterer') as InjectionKey<{
+  markerClusterer: ShallowRef<MarkerClusterer | undefined>
+}>
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  options?: Omit<MarkerClustererOptions, 'map'>
+}>()
+
+const markerClustererEvents = [
+  'click',
+  'clusteringbegin',
+  'clusteringend',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof markerClustererEvents[number], payload: MarkerClusterer): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+const markerClusterer = shallowRef<MarkerClusterer | undefined>(undefined)
+
+whenever(() => mapContext?.map.value, (map) => {
+  markerClusterer.value = new MarkerClusterer({
+    map,
+    ...props.options,
+  })
+
+  setupMarkerClustererEventListeners(markerClusterer.value)
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!markerClusterer.value) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(markerClusterer.value)
+
+  markerClusterer.value.setMap(null)
+})
+
+provide(MARKER_CLUSTERER_INJECTION_KEY, { markerClusterer })
+
+function setupMarkerClustererEventListeners(markerClusterer: MarkerClusterer) {
+  markerClustererEvents.forEach((event) => {
+    markerClusterer.addListener(event, () => emit(event, markerClusterer))
+  })
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsPinElement.vue b/src/runtime/components/ScriptGoogleMapsPinElement.vue
new file mode 100644
index 00000000..cd0e6ece
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsPinElement.vue
@@ -0,0 +1,39 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, shallowRef } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+import { ADVANCED_MARKER_ELEMENT_INJECTION_KEY } from './ScriptGoogleMapsAdvancedMarkerElement.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.marker.PinElementOptions, 'map'>
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+const advancedMarkerElementContext = inject(ADVANCED_MARKER_ELEMENT_INJECTION_KEY, undefined)
+
+const pinElement = shallowRef<google.maps.marker.PinElement | undefined>(undefined)
+
+whenever(() => mapContext?.map.value && advancedMarkerElementContext?.advancedMarkerElement.value, async () => {
+  await mapContext!.mapsApi.value!.importLibrary('marker')
+
+  pinElement.value = new google.maps.marker.PinElement(props.options)
+
+  if (advancedMarkerElementContext?.advancedMarkerElement.value) {
+    advancedMarkerElementContext.advancedMarkerElement.value.content = pinElement.value.element
+  }
+
+  whenever(() => props.options, (options) => {
+    for (const option in options) {
+      pinElement.value![option as keyof typeof props.options] = options[option as keyof typeof props.options]
+    }
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsPolygon.vue b/src/runtime/components/ScriptGoogleMapsPolygon.vue
new file mode 100644
index 00000000..7d84719d
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsPolygon.vue
@@ -0,0 +1,76 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.PolygonOptions, 'map'>
+}>()
+
+const eventsWithPolyMouseEventPayload = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+const eventsWithMapMouseEventPayload = [
+  'drag',
+  'dragend',
+  'dragstart',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof eventsWithPolyMouseEventPayload[number], payload: google.maps.PolyMouseEvent): void
+  (event: typeof eventsWithMapMouseEventPayload[number], payload: google.maps.MapMouseEvent): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+let polygon: google.maps.Polygon | undefined = undefined
+
+whenever(() => mapContext?.map.value, (map) => {
+  polygon = new google.maps.Polygon({
+    map,
+    ...props.options,
+  })
+
+  setupPolygonEventListeners(polygon)
+
+  whenever(() => props.options, (options) => {
+    polygon?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!polygon) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(polygon)
+
+  polygon.setMap(null)
+})
+
+function setupPolygonEventListeners(polygon: google.maps.Polygon) {
+  eventsWithPolyMouseEventPayload.forEach((event) => {
+    polygon.addListener(event, (payload: google.maps.PolyMouseEvent) => emit(event, payload))
+  })
+
+  eventsWithMapMouseEventPayload.forEach((event) => {
+    polygon.addListener(event, (payload: google.maps.MapMouseEvent) => emit(event, payload))
+  })
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsPolyline.vue b/src/runtime/components/ScriptGoogleMapsPolyline.vue
new file mode 100644
index 00000000..7aeca4ee
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsPolyline.vue
@@ -0,0 +1,76 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.PolylineOptions, 'map'>
+}>()
+
+const eventsWithPolyMouseEventPayload = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+const eventsWithMapMouseEventPayload = [
+  'drag',
+  'dragend',
+  'dragstart',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof eventsWithPolyMouseEventPayload[number], payload: google.maps.PolyMouseEvent): void
+  (event: typeof eventsWithMapMouseEventPayload[number], payload: google.maps.MapMouseEvent): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+let polyline: google.maps.Polyline | undefined = undefined
+
+whenever(() => mapContext?.map.value, (map) => {
+  polyline = new google.maps.Polyline({
+    map,
+    ...props.options,
+  })
+
+  setupPolylineEventListeners(polyline)
+
+  whenever(() => props.options, (options) => {
+    polyline?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!polyline) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(polyline)
+
+  polyline.setMap(null)
+})
+
+function setupPolylineEventListeners(polyline: google.maps.Polyline) {
+  eventsWithPolyMouseEventPayload.forEach((event) => {
+    polyline.addListener(event, (payload: google.maps.PolyMouseEvent) => emit(event, payload))
+  })
+
+  eventsWithMapMouseEventPayload.forEach((event) => {
+    polyline.addListener(event, (payload: google.maps.MapMouseEvent) => emit(event, payload))
+  })
+}
+</script>
diff --git a/src/runtime/components/ScriptGoogleMapsRectangle.vue b/src/runtime/components/ScriptGoogleMapsRectangle.vue
new file mode 100644
index 00000000..451adea7
--- /dev/null
+++ b/src/runtime/components/ScriptGoogleMapsRectangle.vue
@@ -0,0 +1,77 @@
+<template>
+</template>
+
+<script setup lang="ts">
+import { inject, onUnmounted } from 'vue'
+import { whenever } from '@vueuse/core'
+import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
+
+const props = defineProps<{
+  options?: Omit<google.maps.RectangleOptions, 'map'>
+}>()
+
+const eventsWithoutPayload = [
+  'bounds_changed',
+] as const
+
+const eventsWithMapMouseEventPayload = [
+  'click',
+  'contextmenu',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+] as const
+
+const emit = defineEmits<{
+  (event: typeof eventsWithoutPayload[number]): void
+  (event: typeof eventsWithMapMouseEventPayload[number], payload: google.maps.MapMouseEvent): void
+}>()
+
+const mapContext = inject(MAP_INJECTION_KEY, undefined)
+
+let rectangle: google.maps.Rectangle | undefined = undefined
+
+whenever(() => mapContext?.map.value, (map) => {
+  rectangle = new google.maps.Rectangle({
+    map,
+    ...props.options,
+  })
+
+  setupRectangleEventListeners(rectangle)
+
+  whenever(() => props.options, (options) => {
+    rectangle?.setOptions(options)
+  }, {
+    deep: true,
+  })
+}, {
+  immediate: true,
+  once: true,
+})
+
+onUnmounted(() => {
+  if (!rectangle) {
+    return
+  }
+
+  google.maps.event.clearInstanceListeners(rectangle)
+
+  rectangle.setMap(null)
+})
+
+function setupRectangleEventListeners(rectangle: google.maps.Rectangle) {
+  eventsWithoutPayload.forEach((event) => {
+    rectangle.addListener(event, () => emit(event))
+  })
+
+  eventsWithMapMouseEventPayload.forEach((event) => {
+    rectangle.addListener(event, (payload: google.maps.MapMouseEvent) => emit(event, payload))
+  })
+}
+</script>