diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
index 6088670f..8eeee416 100644
--- a/.github/workflows/deploy-website.yml
+++ b/.github/workflows/deploy-website.yml
@@ -38,7 +38,6 @@ jobs:
         working-directory: ./website
         run: npm ci
 
-
       - name: Build website
         working-directory: ./website
         run: |
@@ -46,6 +45,13 @@ jobs:
         env:
           GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
 
+      - name: Find and Replace - Examples API Key
+        uses: jacobtomlinson/gha-find-replace@v3
+        with:
+          find: 'process.env.GOOGLE_MAPS_API_KEY'
+          replace: ${{ secrets.GOOGLE_MAPS_API_KEY_EXAMPLES }}
+          include: './website/build/scripts/examples.js'
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html
index 8edcfc78..e15e0c27 100644
--- a/examples/basic-map/index.html
+++ b/examples/basic-map/index.html
@@ -24,6 +24,7 @@
     <div id="app"></div>
     <script type="module">
       import '@vis.gl/react-google-maps/examples.css';
+      import '@vis.gl/react-google-maps/examples.js';
       import {renderToDom} from './src/app';
 
       renderToDom(document.querySelector('#app'));
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx
index ff560e40..eea4a41a 100644
--- a/examples/basic-map/src/app.tsx
+++ b/examples/basic-map/src/app.tsx
@@ -4,7 +4,8 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 
-const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
 const App = () => (
   <APIProvider apiKey={API_KEY}>
diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js
index 187e629c..522c6cb9 100644
--- a/examples/basic-map/vite.config.js
+++ b/examples/basic-map/vite.config.js
@@ -6,6 +6,12 @@ export default defineConfig(({mode}) => {
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps/examples.js':
+          'https://visgl.github.io/react-google-maps/scripts/examples.js'
+      }
     }
   };
 });
diff --git a/examples/global.d.ts b/examples/global.d.ts
new file mode 100644
index 00000000..1726e170
--- /dev/null
+++ b/examples/global.d.ts
@@ -0,0 +1,5 @@
+export declare global {
+  // const or let does not work in this case, it has to be var
+  // eslint-disable-next-line no-var
+  var GOOGLE_MAPS_API_KEY: string | undefined;
+}
diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js
index 97bdf340..bf866b05 100644
--- a/examples/vite.config.local.js
+++ b/examples/vite.config.local.js
@@ -10,6 +10,9 @@ export default defineConfig(({mode}) => {
     },
     resolve: {
       alias: {
+        '@vis.gl/react-google-maps/examples.js': resolve(
+          '../../website/static/scripts/examples.js'
+        ),
         '@vis.gl/react-google-maps/examples.css': resolve(
           '../../examples/examples.css'
         ),
diff --git a/website/static/scripts/examples.js b/website/static/scripts/examples.js
new file mode 100644
index 00000000..836a9ca5
--- /dev/null
+++ b/website/static/scripts/examples.js
@@ -0,0 +1,4 @@
+// For the codesandbox examples, the 'process.env.GOOGLE_MAPS_API_KEY'
+// gets replaced in the deploy task in the github action
+// to contain the valid key for the examples
+globalThis.GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;