feat(examples): update all examples to new api key mechanism

examples/_template/index.html

@@ -22,6 +22,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'));

examples/_template/src/app.tsx

@@ -1,12 +1,23 @@
-import React, {FunctionComponent} from 'react';
+import React from 'react';
 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 App = () => <APIProvider apiKey={API_KEY}></APIProvider>;
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
+const App = () => (
+  <APIProvider apiKey={API_KEY}>
+    <Map
+      zoom={3}
+      center={{lat: 22.54992, lng: 0}}
+      gestureHandling={'greedy'}
+      disableDefaultUI={true}
+    />
+    <ControlPanel />
+  </APIProvider>
+);
 export default App;
 
 export function renderToDom(container: HTMLElement) {

examples/_template/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'
+      }
     }
   };
 });

examples/change-map-styles/index.html

@@ -22,6 +22,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'));

examples/change-map-styles/src/app.tsx

@@ -88,7 +88,8 @@ const MAP_CONFIGS: MapConfig[] = [
   }
 ];
 
-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 = () => {
   const [mapConfig, setMapConfig] = useState<MapConfig>(MAP_CONFIGS[0]);

examples/change-map-styles/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'
+      }
     }
   };
 });

examples/deckgl-overlay/index.html

@@ -22,6 +22,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'));

examples/deckgl-overlay/src/app.tsx

@@ -12,7 +12,8 @@ const DATA_URL =
 import type {Feature, GeoJSON} from 'geojson';
 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 = () => {
   const [data, setData] = useState<GeoJSON | null>(null);

examples/deckgl-overlay/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'
+      }
     }
   };
 });

examples/directions/index.html

@@ -60,6 +60,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'));

examples/directions/src/app.tsx

@@ -8,7 +8,8 @@ import {
   useMap
 } from '@vis.gl/react-google-maps';
 
-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}>

examples/directions/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'
+      }
     }
   };
 });

examples/map-control/index.html

@@ -22,6 +22,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'));

examples/map-control/src/app.tsx

@@ -11,7 +11,8 @@ import {
 import ControlPanel from './control-panel';
 import {CustomZoomControl} from './custom-zoom-control';
 
-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 = () => {
   const [controlPosition, setControlControlPosition] =

examples/map-control/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'
+      }
     }
   };
 });

examples/marker-clustering/index.html

@@ -26,6 +26,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'));

examples/marker-clustering/src/app.tsx

@@ -11,7 +11,8 @@ import {MarkerClusterer} from '@googlemaps/markerclusterer';
 import type {Marker} from '@googlemaps/markerclusterer';
 import trees from './trees';
 
-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}>

examples/marker-clustering/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'
+      }
     }
   };
 });

examples/markers-and-infowindows/index.html

@@ -22,6 +22,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'));

examples/markers-and-infowindows/src/app.tsx

@@ -14,7 +14,8 @@ import ControlPanel from './control-panel';
 import {MovingMarker} from './moving-marker';
 import {MarkerWithInfowindow} from './marker-with-infowindow';
 
-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 = () => {
   return (

examples/markers-and-infowindows/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'
+      }
     }
   };
 });