feat: Integrate dynamic API key injection

.github/workflows/release.yml

@@ -28,7 +28,7 @@ jobs:
       contents: write
       id-token: write
     env:
-      GOOGLE_MAPS_JS_SAMPLES_KEY: "${{ secrets.GOOGLE_MAPS_JS_SAMPLES_KEY }}"
+      GOOGLE_MAPS_API_KEY: "${{ secrets.GOOGLE_MAPS_API_KEY }}"
     steps:
       - name: Checkout main
         uses: actions/checkout@v4

.github/workflows/tests.yml

@@ -35,6 +35,7 @@ on:
 
 env:
   SKIP_DIST: ${{ github.event_name == 'pull_request' || github.event_name == 'schedule' }}
+  GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV }}"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -137,6 +138,7 @@ jobs:
           done
         env:
           STEPS_GET_WORKSPACES_OUTPUTS_CHANGED_WORKSPACES: ${{ steps.get_workspaces.outputs.changed_workspaces }}
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV }}"
 
       - name: Generate Index (Run Once After Builds)
         run: bash samples/generate-index.sh
@@ -151,6 +153,7 @@ jobs:
           # Pass the correct base reference for find-changes.sh when called by samples.spec.ts
           GIT_BASE_REF: ${{ github.event_name == 'pull_request' && format('origin/{0}', github.base_ref) || github.event.before }}
           CI: true
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV }}"
 
       - name: Upload Test Report Artifact
         uses: actions/upload-artifact@v4
@@ -203,6 +206,8 @@ jobs:
 
       - name: Build All Projects
         run: npm run build-all
+        env:
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV }}"
 
       - name: Generate Index (Run Once After Full Builds)
         run: bash samples/generate-index.sh
@@ -216,6 +221,7 @@ jobs:
         env:
           CI: true
           TEST_ALL_SAMPLES: "true"
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV }}"
 
       - name: Upload Test Report Artifact
         uses: actions/upload-artifact@v4

.gitignore

@@ -7,6 +7,7 @@ samples/.env
 # Ignore dist files generated by build.
 samples/*/dist/
 samples/*/*.js
+!samples/*/vite.config.js
 
 # Ignore playwright outputs
 /test-results/

e2e/samples.spec.ts

@@ -146,15 +146,14 @@
         // START run the preview
         // Get an available port
         const port = 8080;
-        const url = `http://localhost:${port}/`;
+        const url = `http://localhost:${port}/samples/${sampleFolder}/dist/`;
 
         const viteProcess = childProcess.spawn(
             'vite',
             ['preview', `--port=${port}`],
             {
                 cwd: path.join(samplesDir, sampleFolder),
                 stdio: 'inherit',
-                detached: true, // Allows parent to exit independently, though we kill it in finally
             }
         );
 
@@ -213,7 +212,7 @@
             // Wait for Google Maps to load.
             await page.waitForFunction(
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 () => (window as any).google?.maps,
                 { timeout: 500 }
             );
 
@@ -225,9 +224,9 @@
             const hasGoogleMaps = await page.evaluate(() => {
                 return (
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     typeof (window as any).google !== 'undefined' &&
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     typeof (window as any).google.maps !== 'undefined'
                 );
             });
             expect(hasGoogleMaps).toBeTruthy();
@@ -247,13 +246,13 @@
                     process.kill(viteProcess.pid, 'SIGINT');
                 } catch (error) {
                     console.warn(
                         `Failed to kill Vite process for ${sampleFolder} (PID: ${viteProcess.pid}):`,
                         error
                     );
                 }
             }
-            // Add a small delay to allow the process to terminate
-            await page.waitForTimeout(500);
+            // Add a small delay to allow the process to terminate without depending on the potentially closed page object
+            await new Promise((resolve) => setTimeout(resolve, 500));
         }
     });
 });

samples/3d-accessibility-features/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-accessibility-features/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-camera-boundary/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-camera-boundary/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-camera-center/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
+                key: "GOOGLE_MAPS_API_KEY" 
             });
         </script>
     </head>

samples/3d-camera-center/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-camera-position/index.html

@@ -13,7 +13,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-camera-position/index.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 // [START maps_3d_camera_position]
-async function initMap(): Promise<void> {
+async function init(): Promise<void> {
     // Declare the needed libraries.
     await google.maps.importLibrary('maps3d');
 
@@ -68,7 +68,7 @@
             lngSlider.value = lng;
             altitudeVal.textContent = alt;
 
             codeElem.textContent = `<gmp-map-3d center="${lat},${lng},${alt}" mode="${mode}" tilt="${tilt}" range="${range}" heading="${heading}" fov="${fov}" roll="${roll}"></gmp-map-3d>`;
         }
     };
 
@@ -126,7 +126,7 @@
             map3DElement.fov = Math.min(80, Math.max(5, val));
         } else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (map3DElement as any)[prop] = val;
         }
         updateUI();
     });
@@ -148,5 +148,5 @@
     setTimeout(updateUI, 500);
 }
 
-void initMap();
+void init();
 // [END maps_3d_camera_position]

samples/3d-camera-position/package.json

@@ -2,11 +2,10 @@
   "name": "@js-api-samples/3d-camera-position",
   "version": "1.0.0",
   "scripts": {
-    "build": "tsc && bash ../jsfiddle.sh 3d-camera-position && bash ../app.sh 3d-camera-position && bash ../docs.sh 3d-camera-position && npm run build:vite --workspace=. && bash ../dist.sh 3d-camera-position",
+    "build": "bash ../build-single.sh",
     "test": "tsc && npm run build:vite --workspace=.",
     "start": "tsc && vite build --base './' && vite",
     "build:vite": "vite build --base './'",
     "preview": "vite preview"
-  },
-  "dependencies": {}
+  }
 }

samples/3d-camera-position/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-camera-to-around/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-camera-to-around/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-clamp-mode/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-clamp-mode/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-coverage-map/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-coverage-map/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-hero-showcase/index.html

@@ -23,7 +23,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-hero-showcase/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-label-toggle/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-label-toggle/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-localization/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-localization/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-map-45-degree-locked/index.html

@@ -12,7 +12,7 @@
         <script type="module" src="./index.js"></script>
         <script
             async
-            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
+            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
     </head>
     <body>
         <gmp-map-3d

samples/3d-map-45-degree-locked/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-map-45-degree/index.html

@@ -13,7 +13,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-map-45-degree/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-map-events/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-map-events/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-map-roadmap/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
+                key: "GOOGLE_MAPS_API_KEY",
                 v: "alpha" 
             });
         </script>

samples/3d-map-roadmap/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-map-styling/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-map-styling/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-marker-click-event/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-marker-click-event/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';

samples/3d-marker-collision-behavior/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

samples/3d-marker-collision-behavior/vite.config.js

@@ -0,0 +1 @@
+export { default } from '../../vite.config.js';