diff --git a/dist/samples/programmatic-load-button/app/index.ts b/dist/samples/programmatic-load-button/app/index.ts
index ee3f2a0f70..397357f051 100644
--- a/dist/samples/programmatic-load-button/app/index.ts
+++ b/dist/samples/programmatic-load-button/app/index.ts
@@ -12,16 +12,17 @@ const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
 const url = "https://maps.googleapis.com/maps/api/staticmap";
 
-// @ts-ignore google.maps.plugins
+const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
 const loader = new Loader({
-  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY!,
+  apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper") as HTMLButtonElement;
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
 
   wrapper.addEventListener("click", () => {
     wrapper.remove();
diff --git a/dist/samples/programmatic-load-button/docs/index.js b/dist/samples/programmatic-load-button/docs/index.js
index b46e25e290..ed2cd768f6 100644
--- a/dist/samples/programmatic-load-button/docs/index.js
+++ b/dist/samples/programmatic-load-button/docs/index.js
@@ -9,16 +9,16 @@ let map;
 const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
 const url = "https://maps.googleapis.com/maps/api/staticmap";
-// @ts-ignore google.maps.plugins
+const apiKey = "YOUR_API_KEY";
 const loader = new Loader({
-  apiKey: "YOUR_API_KEY",
+  apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper");
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
   wrapper.addEventListener("click", () => {
     wrapper.remove();
     loader.load().then(() => {
diff --git a/dist/samples/programmatic-load-button/jsfiddle/demo.js b/dist/samples/programmatic-load-button/jsfiddle/demo.js
index dfd9a7eac4..a937c47e1f 100644
--- a/dist/samples/programmatic-load-button/jsfiddle/demo.js
+++ b/dist/samples/programmatic-load-button/jsfiddle/demo.js
@@ -8,16 +8,16 @@ let map;
 const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
 const url = "https://maps.googleapis.com/maps/api/staticmap";
-// @ts-ignore google.maps.plugins
+const apiKey = "YOUR_API_KEY";
 const loader = new Loader({
-  apiKey: "YOUR_API_KEY",
+  apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper");
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
   wrapper.addEventListener("click", () => {
     wrapper.remove();
     loader.load().then(() => {
diff --git a/dist/samples/programmatic-load-button/playground/index.ts b/dist/samples/programmatic-load-button/playground/index.ts
index e69e8508d8..e59259aa32 100644
--- a/dist/samples/programmatic-load-button/playground/index.ts
+++ b/dist/samples/programmatic-load-button/playground/index.ts
@@ -6,16 +6,17 @@ const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
 const url = "https://maps.googleapis.com/maps/api/staticmap";
 
-// @ts-ignore google.maps.plugins
+const apiKey = process.env.GOOGLE_MAPS_API_KEY!;
+
 const loader = new Loader({
-  apiKey: process.env.GOOGLE_MAPS_API_KEY!,
+  apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper") as HTMLButtonElement;
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
 
   wrapper.addEventListener("click", () => {
     wrapper.remove();
diff --git a/dist/samples/programmatic-load/app/index.ts b/dist/samples/programmatic-load/app/index.ts
index 6111ccc200..f751ed2c7a 100644
--- a/dist/samples/programmatic-load/app/index.ts
+++ b/dist/samples/programmatic-load/app/index.ts
@@ -10,7 +10,7 @@ let map: google.maps.Map;
 
 const additionalOptions = {};
 const loader = new Loader({
-  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY!,
+  apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
   version: "weekly",
   ...additionalOptions,
 });
diff --git a/dist/samples/react-map/app/index.tsx b/dist/samples/react-map/app/index.tsx
index 52c2577ef5..cba29326e4 100644
--- a/dist/samples/react-map/app/index.tsx
+++ b/dist/samples/react-map/app/index.tsx
@@ -24,6 +24,8 @@ const render = (status: Status) => {
   return <h1>{status}</h1>;
 };
 
+const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
 const App: React.VFC = () => {
   const [clicks, setClicks] = React.useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = React.useState(3); // initial zoom
@@ -92,7 +94,7 @@ const App: React.VFC = () => {
 
   return (
     <div style={{ display: "flex", height: "100%" }}>
-      <Wrapper apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY!} render={render}>
+      <Wrapper apiKey={apiKey} render={render}>
         <Map
           center={center}
           onClick={onClick}
diff --git a/dist/samples/react-map/docs/index.jsx b/dist/samples/react-map/docs/index.jsx
index 1cc7d265df..f05aed5bd0 100644
--- a/dist/samples/react-map/docs/index.jsx
+++ b/dist/samples/react-map/docs/index.jsx
@@ -23,6 +23,8 @@ const render = (status) => {
   return <h1>{status}</h1>;
 };
 
+const apiKey = "YOUR_API_KEY";
+
 const App = () => {
   // [START maps_react_map_component_app_state]
   const [clicks, setClicks] = React.useState([]);
@@ -93,7 +95,7 @@ const App = () => {
   // [START maps_react_map_component_app_return]
   return (
     <div style={{ display: "flex", height: "100%" }}>
-      <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
+      <Wrapper apiKey={apiKey} render={render}>
         <Map
           center={center}
           onClick={onClick}
diff --git a/dist/samples/react-map/jsfiddle/demo.jsx b/dist/samples/react-map/jsfiddle/demo.jsx
index 21c8a2c8c2..cd8b2af179 100644
--- a/dist/samples/react-map/jsfiddle/demo.jsx
+++ b/dist/samples/react-map/jsfiddle/demo.jsx
@@ -22,6 +22,8 @@ const render = (status) => {
   return <h1>{status}</h1>;
 };
 
+const apiKey = "YOUR_API_KEY";
+
 const App = () => {
   const [clicks, setClicks] = React.useState([]);
   const [zoom, setZoom] = React.useState(3); // initial zoom
@@ -89,7 +91,7 @@ const App = () => {
   );
   return (
     <div style={{ display: "flex", height: "100%" }}>
-      <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
+      <Wrapper apiKey={apiKey} render={render}>
         <Map
           center={center}
           onClick={onClick}
diff --git a/dist/samples/react-map/playground/index.tsx b/dist/samples/react-map/playground/index.tsx
index ce924842e1..f26c5afb5f 100644
--- a/dist/samples/react-map/playground/index.tsx
+++ b/dist/samples/react-map/playground/index.tsx
@@ -24,6 +24,8 @@ const render = (status: Status) => {
   return <h1>{status}</h1>;
 };
 
+const apiKey = process.env.GOOGLE_MAPS_API_KEY!;
+
 const App: React.VFC = () => {
   const [clicks, setClicks] = React.useState<google.maps.LatLng[]>([]);
   const [zoom, setZoom] = React.useState(3); // initial zoom
@@ -92,7 +94,7 @@ const App: React.VFC = () => {
 
   return (
     <div style={{ display: "flex", height: "100%" }}>
-      <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
+      <Wrapper apiKey={apiKey} render={render}>
         <Map
           center={center}
           onClick={onClick}
diff --git a/samples/programmatic-load-button/index.ts b/samples/programmatic-load-button/index.ts
index 8937d1f9cc..18a6606a7b 100644
--- a/samples/programmatic-load-button/index.ts
+++ b/samples/programmatic-load-button/index.ts
@@ -13,16 +13,17 @@ const center = { lat: 41.90476224706472, lng: 12.49822074385094 };
 const zoom = 14;
 const url = "https://maps.googleapis.com/maps/api/staticmap";
 
-// @ts-ignore google.maps.plugins
+const apiKey = "YOUR_API_KEY";
+
 const loader = new Loader({
-  apiKey: "YOUR_API_KEY",
+  apiKey,
   version: "weekly",
 });
 
 document.addEventListener("DOMContentLoaded", () => {
   const wrapper = document.getElementById("wrapper") as HTMLButtonElement;
 
-  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=YOUR_API_KEY)`;
+  wrapper.style.backgroundImage = `url(${url}?center=${center.lat},${center.lng}&zoom=${zoom}&scale=2&size=${wrapper.clientWidth}x${wrapper.clientHeight}&key=${apiKey})`;
 
   wrapper.addEventListener("click", () => {
     wrapper.remove();
diff --git a/samples/react-map/index.tsx b/samples/react-map/index.tsx
index 15d822af3d..b3d24d8867 100644
--- a/samples/react-map/index.tsx
+++ b/samples/react-map/index.tsx
@@ -25,6 +25,8 @@ const render = (status: Status) => {
   return <h1>{status}</h1>;
 };
 
+const apiKey = "YOUR_API_KEY";
+
 const App: React.VFC = () => {
   // [START maps_react_map_component_app_state]
   const [clicks, setClicks] = React.useState<google.maps.LatLng[]>([]);
@@ -96,7 +98,7 @@ const App: React.VFC = () => {
   // [START maps_react_map_component_app_return]
   return (
     <div style={{ display: "flex", height: "100%" }}>
-      <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
+      <Wrapper apiKey={apiKey} render={render}>
         <Map
           center={center}
           onClick={onClick}
diff --git a/src/transforms/your-api-key.js b/src/transforms/your-api-key.js
index 4b96fce7e9..f778ccc14a 100644
--- a/src/transforms/your-api-key.js
+++ b/src/transforms/your-api-key.js
@@ -6,11 +6,11 @@ module.exports = function (content, outputPath) {
   if (/app\/index\.tsx?$/.test(outputPath)) {
     content = content.replace(
       /"YOUR_API_KEY"/g,
-      "import.meta.env.VITE_GOOGLE_MAPS_API_KEY!"
+      "import.meta.env.VITE_GOOGLE_MAPS_API_KEY"
     );
   }
 
-  if (outputPath.endsWith("playground/index.ts")) {
+  if (/playground\/index\.tsx?$/.test(outputPath)) {
     content = content.replace(
       /"YOUR_API_KEY"/g,
       "process.env.GOOGLE_MAPS_API_KEY!"