diff --git a/examples/heatmap/README.md b/examples/deckgl-heatmap/README.md
similarity index 89%
rename from examples/heatmap/README.md
rename to examples/deckgl-heatmap/README.md
index 6b966423..0b720814 100644
--- a/examples/heatmap/README.md
+++ b/examples/deckgl-heatmap/README.md
@@ -1,7 +1,7 @@
-# Heatmap
+# Deck.gl Heatmap
 
-This uses the `useMapsLibrary` hook showing earthquake magnitude data in a
-heatmap.
+This uses deck.gl's `HeatmapLayer` and `GoogleMapsOverlay` to show earthquake
+magnitude data in a heatmap.
 
 ## Google Maps Platform API key
 
diff --git a/examples/heatmap/data/earthquakes.json b/examples/deckgl-heatmap/data/earthquakes.json
similarity index 100%
rename from examples/heatmap/data/earthquakes.json
rename to examples/deckgl-heatmap/data/earthquakes.json
diff --git a/examples/heatmap/index.html b/examples/deckgl-heatmap/index.html
similarity index 94%
rename from examples/heatmap/index.html
rename to examples/deckgl-heatmap/index.html
index 11f1d621..f25ef828 100644
--- a/examples/heatmap/index.html
+++ b/examples/deckgl-heatmap/index.html
@@ -5,7 +5,7 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, user-scalable=no" />
-    <title>Heatmap</title>
+    <title>deck.gl Heatmap</title>
 
     <style>
       body {
diff --git a/examples/heatmap/package.json b/examples/deckgl-heatmap/package.json
similarity index 78%
rename from examples/heatmap/package.json
rename to examples/deckgl-heatmap/package.json
index 17dd37b7..0a5dcba9 100644
--- a/examples/heatmap/package.json
+++ b/examples/deckgl-heatmap/package.json
@@ -1,8 +1,11 @@
 {
   "type": "module",
   "dependencies": {
+    "@deck.gl/aggregation-layers": "9.3.3",
+    "@deck.gl/google-maps": "9.3.3",
     "@types/geojson": "^7946.0.14",
     "@vis.gl/react-google-maps": "latest",
+    "deck.gl": "9.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0"
diff --git a/examples/heatmap/src/app.tsx b/examples/deckgl-heatmap/src/app.tsx
similarity index 82%
rename from examples/heatmap/src/app.tsx
rename to examples/deckgl-heatmap/src/app.tsx
index 6bbe2be8..01242a78 100644
--- a/examples/heatmap/src/app.tsx
+++ b/examples/deckgl-heatmap/src/app.tsx
@@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
 import ControlPanel from './control-panel';
-import Heatmap from './heatmap';
+import DeckGlHeatmap from './deckgl-heatmap';
 import {EarthquakesGeojson, loadEarthquakeGeojson} from './earthquakes';
 
 const API_KEY =
@@ -28,16 +28,15 @@ const App = () => {
         defaultCenter={{lat: 40.7749, lng: -130.4194}}
         defaultZoom={3}
         gestureHandling={'greedy'}
-        disableDefaultUI={true}
-      />
-
-      {earthquakesGeojson && (
-        <Heatmap
-          geojson={earthquakesGeojson}
-          radius={radius}
-          opacity={opacity}
-        />
-      )}
+        disableDefaultUI={true}>
+        {earthquakesGeojson && (
+          <DeckGlHeatmap
+            geojson={earthquakesGeojson}
+            radius={radius}
+            opacity={opacity}
+          />
+        )}
+      </Map>
 
       <ControlPanel
         radius={radius}
diff --git a/examples/heatmap/src/control-panel.tsx b/examples/deckgl-heatmap/src/control-panel.tsx
similarity index 86%
rename from examples/heatmap/src/control-panel.tsx
rename to examples/deckgl-heatmap/src/control-panel.tsx
index 6e21251b..e43c4d39 100644
--- a/examples/heatmap/src/control-panel.tsx
+++ b/examples/deckgl-heatmap/src/control-panel.tsx
@@ -15,11 +15,11 @@ function ControlPanel({
 }: Props) {
   return (
     <div className="control-panel">
-      <h3>Heatmap</h3>
+      <h3>deck.gl Heatmap</h3>
       <p>
-        This uses the <code>useMapsLibrary()</code> hook and the{' '}
-        <code>google.maps.visualization</code> library to show earthquake
-        magnitude data in a heatmap.
+        This uses deck.gl&apos;s <code>HeatmapLayer</code> with a{' '}
+        <code>GoogleMapsOverlay</code> to show earthquake magnitude data on top
+        of the map.
       </p>
 
       {/* Circle Controls */}
@@ -60,13 +60,13 @@ function ControlPanel({
 
       <div className="links">
         <a
-          href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/heatmap"
+          href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/deckgl-heatmap"
           target="_new">
           Try on CodeSandbox ↗
         </a>
 
         <a
-          href="https://github.com/visgl/react-google-maps/tree/main/examples/heatmap"
+          href="https://github.com/visgl/react-google-maps/tree/main/examples/deckgl-heatmap"
           target="_new">
           View Code ↗
         </a>
diff --git a/examples/deckgl-heatmap/src/deckgl-heatmap.tsx b/examples/deckgl-heatmap/src/deckgl-heatmap.tsx
new file mode 100644
index 00000000..8b97665e
--- /dev/null
+++ b/examples/deckgl-heatmap/src/deckgl-heatmap.tsx
@@ -0,0 +1,35 @@
+import React, {useMemo} from 'react';
+
+import {HeatmapLayer} from '@deck.gl/aggregation-layers';
+
+import {DeckGlOverlay} from './deckgl-overlay';
+import {EarthquakesGeojson} from './earthquakes';
+
+type HeatmapProps = {
+  geojson: EarthquakesGeojson;
+  radius: number;
+  opacity: number;
+};
+
+type EarthquakeFeature = EarthquakesGeojson['features'][number];
+
+const DeckGlHeatmap = ({geojson, radius, opacity}: HeatmapProps) => {
+  const layers = useMemo(
+    () => [
+      new HeatmapLayer({
+        id: 'earthquake-heatmap',
+        data: geojson.features,
+        radiusPixels: radius,
+        opacity,
+        getPosition: (feature: EarthquakeFeature) =>
+          feature.geometry.coordinates,
+        getWeight: (feature: EarthquakeFeature) => feature.properties?.mag ?? 0
+      })
+    ],
+    [geojson, opacity, radius]
+  );
+
+  return <DeckGlOverlay layers={layers} />;
+};
+
+export default DeckGlHeatmap;
diff --git a/examples/deckgl-heatmap/src/deckgl-overlay.ts b/examples/deckgl-heatmap/src/deckgl-overlay.ts
new file mode 100644
index 00000000..9158e9c0
--- /dev/null
+++ b/examples/deckgl-heatmap/src/deckgl-overlay.ts
@@ -0,0 +1,25 @@
+import {useMap} from '@vis.gl/react-google-maps';
+import {useEffect, useMemo} from 'react';
+
+import {GoogleMapsOverlay} from '@deck.gl/google-maps';
+
+import type {LayersList} from '@deck.gl/core';
+
+export type DeckGlOverlayProps = {layers?: LayersList};
+
+export const DeckGlOverlay = ({layers}: DeckGlOverlayProps) => {
+  const deck = useMemo(() => new GoogleMapsOverlay({interleaved: true}), []);
+
+  const map = useMap();
+  useEffect(() => {
+    deck.setMap(map);
+
+    return () => deck.setMap(null);
+  }, [deck, map]);
+
+  useEffect(() => {
+    deck.setProps({layers});
+  }, [deck, layers]);
+
+  return null;
+};
diff --git a/examples/heatmap/src/earthquakes.ts b/examples/deckgl-heatmap/src/earthquakes.ts
similarity index 100%
rename from examples/heatmap/src/earthquakes.ts
rename to examples/deckgl-heatmap/src/earthquakes.ts
diff --git a/examples/heatmap/tsconfig.json b/examples/deckgl-heatmap/tsconfig.json
similarity index 100%
rename from examples/heatmap/tsconfig.json
rename to examples/deckgl-heatmap/tsconfig.json
diff --git a/examples/heatmap/vite.config.js b/examples/deckgl-heatmap/vite.config.js
similarity index 100%
rename from examples/heatmap/vite.config.js
rename to examples/deckgl-heatmap/vite.config.js
diff --git a/examples/deckgl-overlay/package.json b/examples/deckgl-overlay/package.json
index 5740dca6..febecaba 100644
--- a/examples/deckgl-overlay/package.json
+++ b/examples/deckgl-overlay/package.json
@@ -1,10 +1,10 @@
 {
   "type": "module",
   "dependencies": {
-    "@deck.gl/google-maps": "^9.1.0",
+    "@deck.gl/google-maps": "9.3.3",
     "@types/geojson": "^7946.0.14",
     "@vis.gl/react-google-maps": "latest",
-    "deck.gl": "^9.1.0",
+    "deck.gl": "9.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0"
diff --git a/examples/heatmap/src/heatmap.tsx b/examples/heatmap/src/heatmap.tsx
deleted file mode 100644
index 31a73642..00000000
--- a/examples/heatmap/src/heatmap.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {useEffect, useMemo} from 'react';
-import {useMap, useMapsLibrary} from '@vis.gl/react-google-maps';
-import {FeatureCollection, Point, GeoJsonProperties} from 'geojson';
-
-type HeatmapProps = {
-  geojson: FeatureCollection<Point, GeoJsonProperties>;
-  radius: number;
-  opacity: number;
-};
-const Heatmap = ({geojson, radius, opacity}: HeatmapProps) => {
-  const map = useMap();
-  const visualization = useMapsLibrary('visualization');
-
-  const heatmap = useMemo(() => {
-    if (!visualization) return null;
-
-    return new google.maps.visualization.HeatmapLayer({
-      radius: radius,
-      opacity: opacity
-    });
-  }, [visualization, radius, opacity]);
-
-  useEffect(() => {
-    if (!heatmap) return;
-
-    heatmap.setData(
-      geojson.features.map(point => {
-        const [lng, lat] = point.geometry.coordinates;
-
-        return {
-          location: new google.maps.LatLng(lat, lng),
-          weight: point.properties?.mag
-        };
-      })
-    );
-  }, [heatmap, geojson, radius, opacity]);
-
-  useEffect(() => {
-    if (!heatmap) return;
-
-    heatmap.setMap(map);
-
-    return () => {
-      heatmap.setMap(null);
-    };
-  }, [heatmap, map]);
-
-  return null;
-};
-
-export default Heatmap;
diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js
index 7e6473bc..55b96de7 100644
--- a/website/src/examples-sidebar.js
+++ b/website/src/examples-sidebar.js
@@ -20,13 +20,13 @@ const sidebars = {
         'marker-clustering',
         'custom-marker-clustering',
         'geometry',
-        'heatmap',
         'drawing',
         'terra-draw',
         'autocomplete',
         'directions',
         'routes-api',
         'deckgl-overlay',
+        'deckgl-heatmap',
         'map-3d',
         'map-3d-markers',
         'extended-component-library',
diff --git a/website/src/examples/deckgl-heatmap.mdx b/website/src/examples/deckgl-heatmap.mdx
new file mode 100644
index 00000000..25f46d6d
--- /dev/null
+++ b/website/src/examples/deckgl-heatmap.mdx
@@ -0,0 +1,5 @@
+# Deck.gl Heatmap
+
+import App from 'website-examples/deckgl-heatmap/src/app';
+
+<App />
diff --git a/website/src/examples/heatmap.mdx b/website/src/examples/heatmap.mdx
deleted file mode 100644
index 23a40fbd..00000000
--- a/website/src/examples/heatmap.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-# Heatmap
-
-import App from 'website-examples/heatmap/src/app';
-
-<App />
diff --git a/website/static/images/examples/deckgl-heatmap.jpg b/website/static/images/examples/deckgl-heatmap.jpg
new file mode 100644
index 00000000..db4a075a
Binary files /dev/null and b/website/static/images/examples/deckgl-heatmap.jpg differ