feat(examples): add getApiKey lib to every example

examples/_template/src/app.tsx

@@ -3,7 +3,9 @@ import {createRoot} from 'react-dom/client';
 
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
-const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+import {getApiKey} from './lib/get-api-key';
+
+const API_KEY = getApiKey();
 
 const App = () => <APIProvider apiKey={API_KEY}></APIProvider>;
 

examples/_template/src/lib/get-api-key.ts

@@ -0,0 +1,20 @@
+export function getApiKey() {
+  const url = new URL(location.href);
+  const apiKey =
+    url.searchParams.get('apiKey') ||
+    (process.env.GOOGLE_MAPS_API_KEY as string);
+
+  if (!apiKey) {
+    const key = prompt(
+      'Please provide your Google Maps API key in the URL\n' +
+        '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:'
+    );
+
+    if (key) {
+      url.searchParams.set('apiKey', key);
+      location.replace(url.toString());
+    }
+  }
+
+  return apiKey;
+}

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

@@ -10,7 +10,9 @@ import {
 } from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 
-const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
+import {getApiKey} from './lib/get-api-key';
+
+const API_KEY = getApiKey();
 
 const MapTypeId = {
   HYBRID: 'hybrid',

examples/change-map-id/src/lib/get-api-key.ts

@@ -0,0 +1,20 @@
+export function getApiKey() {
+  const url = new URL(location.href);
+  const apiKey =
+    url.searchParams.get('apiKey') ||
+    (process.env.GOOGLE_MAPS_API_KEY as string);
+
+  if (!apiKey) {
+    const key = prompt(
+      'Please provide your Google Maps API key in the URL\n' +
+        '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:'
+    );
+
+    if (key) {
+      url.searchParams.set('apiKey', key);
+      location.replace(url.toString());
+    }
+  }
+
+  return apiKey;
+}

examples/deckgl-overlay/src/app.tsx

@@ -12,7 +12,9 @@ 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;
+import {getApiKey} from './lib/get-api-key';
+
+const API_KEY = getApiKey();
 
 const App = () => {
   const [data, setData] = useState<GeoJSON | null>(null);

examples/deckgl-overlay/src/lib/get-api-key.ts

@@ -0,0 +1,20 @@
+export function getApiKey() {
+  const url = new URL(location.href);
+  const apiKey =
+    url.searchParams.get('apiKey') ||
+    (process.env.GOOGLE_MAPS_API_KEY as string);
+
+  if (!apiKey) {
+    const key = prompt(
+      'Please provide your Google Maps API key in the URL\n' +
+        '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:'
+    );
+
+    if (key) {
+      url.searchParams.set('apiKey', key);
+      location.replace(url.toString());
+    }
+  }
+
+  return apiKey;
+}

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

@@ -14,7 +14,9 @@ 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;
+import {getApiKey} from './lib/get-api-key';
+
+const API_KEY = getApiKey();
 
 const App = () => {
   return (

examples/markers-and-infowindows/src/lib/get-api-key.ts

@@ -0,0 +1,20 @@
+export function getApiKey() {
+  const url = new URL(location.href);
+  const apiKey =
+    url.searchParams.get('apiKey') ||
+    (process.env.GOOGLE_MAPS_API_KEY as string);
+
+  if (!apiKey) {
+    const key = prompt(
+      'Please provide your Google Maps API key in the URL\n' +
+        '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:'
+    );
+
+    if (key) {
+      url.searchParams.set('apiKey', key);
+      location.replace(url.toString());
+    }
+  }
+
+  return apiKey;
+}