diff --git a/dist/samples/web-components-map/app/index.html b/dist/samples/web-components-map/app/index.html
index 523faa845d..4393b62dc8 100644
--- a/dist/samples/web-components-map/app/index.html
+++ b/dist/samples/web-components-map/app/index.html
@@ -6,7 +6,7 @@
 -->
 <html>
   <head>
-    <title>Add a Map Web Component</title>
+    <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
@@ -19,8 +19,16 @@
       map-id="DEMO_MAP_ID"
     ></gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-map/app/index.ts b/dist/samples/web-components-map/app/index.ts
index 86596d1cab..604337545a 100644
--- a/dist/samples/web-components-map/app/index.ts
+++ b/dist/samples/web-components-map/app/index.ts
@@ -6,9 +6,13 @@
 
 // This example adds a map using web components.
 async function initMap(): Promise<void> {
-    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
     console.log('Maps JavaScript API loaded.');
 }
 
-initMap();
+declare global {
+    interface Window {
+      initMap: () => void;
+    }
+  }
+window.initMap = initMap;
 export { };
diff --git a/dist/samples/web-components-map/docs/index.html b/dist/samples/web-components-map/docs/index.html
index f30d7f8140..6be724c12c 100644
--- a/dist/samples/web-components-map/docs/index.html
+++ b/dist/samples/web-components-map/docs/index.html
@@ -7,22 +7,32 @@
 <!-- [START maps_web_components_map] -->
 <html>
   <head>
-    <title>Add a Map Web Component</title>
+    <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
+    <!-- [START maps_web_components_map_gmpmap] -->
     <gmp-map
       center="37.4220656,-122.0840897"
       zoom="10"
       map-id="DEMO_MAP_ID"
     ></gmp-map>
+    <!-- [END maps_web_components_map_gmpmap] -->
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
+      defer
+    ></script>
   </body>
 </html>
 <!-- [END maps_web_components_map] -->
diff --git a/dist/samples/web-components-map/docs/index.js b/dist/samples/web-components-map/docs/index.js
index 807ee62a73..228ce30923 100644
--- a/dist/samples/web-components-map/docs/index.js
+++ b/dist/samples/web-components-map/docs/index.js
@@ -6,10 +6,8 @@
 // [START maps_web_components_map]
 // This example adds a map using web components.
 async function initMap() {
-  const { Map } = await google.maps.importLibrary("maps");
-
   console.log("Maps JavaScript API loaded.");
 }
 
-initMap();
+window.initMap = initMap;
 // [END maps_web_components_map]
diff --git a/dist/samples/web-components-map/docs/style.css b/dist/samples/web-components-map/docs/style.css
index eafefb7f4a..b56f4370f1 100644
--- a/dist/samples/web-components-map/docs/style.css
+++ b/dist/samples/web-components-map/docs/style.css
@@ -22,8 +22,10 @@ body {
   padding: 0;
 }
 
+/* [START maps_web_components_map_style] */
 gmp-map {
   height: 400px;
 }
 
+/* [END maps_web_components_map_style] */
 /* [END maps_web_components_map] */
\ No newline at end of file
diff --git a/dist/samples/web-components-map/iframe/index.html b/dist/samples/web-components-map/iframe/index.html
index dd57ed292d..eeef700878 100644
--- a/dist/samples/web-components-map/iframe/index.html
+++ b/dist/samples/web-components-map/iframe/index.html
@@ -6,10 +6,10 @@
 -->
 <html>
   <head>
-    <title>Add a Map Web Component</title>
+    <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
-    <script type="module" crossorigin src="./assets/index-nZlky8QC.js"></script>
+    <script type="module" crossorigin src="./assets/index-Rz0jDNVK.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-hqGKW_OM.css" />
   </head>
   <body>
@@ -19,8 +19,16 @@
       map-id="DEMO_MAP_ID"
     ></gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-map/jsfiddle/demo.details b/dist/samples/web-components-map/jsfiddle/demo.details
index 450149eff9..5a1d170de4 100644
--- a/dist/samples/web-components-map/jsfiddle/demo.details
+++ b/dist/samples/web-components-map/jsfiddle/demo.details
@@ -1,4 +1,4 @@
-name: Add a Map Web Component
+name: Add a Map using HTML
 authors:
   - Justin Poehnelt
 tags:
diff --git a/dist/samples/web-components-map/jsfiddle/demo.html b/dist/samples/web-components-map/jsfiddle/demo.html
index 62f5575efb..b585c145d3 100644
--- a/dist/samples/web-components-map/jsfiddle/demo.html
+++ b/dist/samples/web-components-map/jsfiddle/demo.html
@@ -6,7 +6,7 @@
 -->
 <html>
   <head>
-    <title>Add a Map Web Component</title>
+    <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <!-- jsFiddle will insert css and js -->
   </head>
@@ -17,8 +17,16 @@
       map-id="DEMO_MAP_ID"
     ></gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-map/jsfiddle/demo.js b/dist/samples/web-components-map/jsfiddle/demo.js
index 2595db4466..7ada191d4f 100644
--- a/dist/samples/web-components-map/jsfiddle/demo.js
+++ b/dist/samples/web-components-map/jsfiddle/demo.js
@@ -5,9 +5,7 @@
  */
 // This example adds a map using web components.
 async function initMap() {
-  const { Map } = await google.maps.importLibrary("maps");
-
   console.log("Maps JavaScript API loaded.");
 }
 
-initMap();
+window.initMap = initMap;
diff --git a/dist/samples/web-components-map/playground/index.html b/dist/samples/web-components-map/playground/index.html
index a369e9e57d..ea6ea584dd 100644
--- a/dist/samples/web-components-map/playground/index.html
+++ b/dist/samples/web-components-map/playground/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Add a Map Web Component</title>
+    <title>Add a Map using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <!-- playground-hide -->
     <script>
@@ -20,8 +20,16 @@
       map-id="DEMO_MAP_ID"
     ></gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-map/playground/index.ts b/dist/samples/web-components-map/playground/index.ts
index 9edbde7fbd..369d957610 100644
--- a/dist/samples/web-components-map/playground/index.ts
+++ b/dist/samples/web-components-map/playground/index.ts
@@ -1,10 +1,12 @@
 // This example adds a map using web components.
 async function initMap(): Promise<void> {
-  const { Map } = (await google.maps.importLibrary(
-    "maps",
-  )) as google.maps.MapsLibrary;
   console.log("Maps JavaScript API loaded.");
 }
 
-initMap();
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
 export {};
diff --git a/dist/samples/web-components-markers/app/index.html b/dist/samples/web-components-markers/app/index.html
index 10f5a77ea3..c84d99a4bb 100644
--- a/dist/samples/web-components-markers/app/index.html
+++ b/dist/samples/web-components-markers/app/index.html
@@ -6,7 +6,7 @@
 -->
 <html>
   <head>
-    <title>Add a Map with Markers using Web Components</title>
+    <title>Add a Map with Markers using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
@@ -24,8 +24,16 @@
       ></gmp-advanced-marker>
     </gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-markers/app/index.ts b/dist/samples/web-components-markers/app/index.ts
index c712660cc7..fb745b0069 100644
--- a/dist/samples/web-components-markers/app/index.ts
+++ b/dist/samples/web-components-markers/app/index.ts
@@ -6,11 +6,12 @@
 
 // This example adds a map with markers, using web components.
 async function initMap(): Promise<void> {
-    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
-    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
-
     console.log('Maps JavaScript API loaded.');
 }
-
-initMap();
+declare global {
+    interface Window {
+      initMap: () => void;
+    }
+  }
+window.initMap = initMap;
 export { };
diff --git a/dist/samples/web-components-markers/docs/index.html b/dist/samples/web-components-markers/docs/index.html
index aceec66b2a..6b0c6ebe04 100644
--- a/dist/samples/web-components-markers/docs/index.html
+++ b/dist/samples/web-components-markers/docs/index.html
@@ -7,7 +7,7 @@
 <!-- [START maps_web_components_markers] -->
 <html>
   <head>
-    <title>Add a Map with Markers using Web Components</title>
+    <title>Add a Map with Markers using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
     <link rel="stylesheet" type="text/css" href="./style.css" />
@@ -27,9 +27,17 @@
     </gmp-map>
     <!-- [END maps_web_components_markers_div] -->
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
+      defer
+    ></script>
   </body>
 </html>
 <!-- [END maps_web_components_markers] -->
diff --git a/dist/samples/web-components-markers/docs/index.js b/dist/samples/web-components-markers/docs/index.js
index 08c6e9439c..5376e4ad64 100644
--- a/dist/samples/web-components-markers/docs/index.js
+++ b/dist/samples/web-components-markers/docs/index.js
@@ -5,12 +5,10 @@
  */
 // [START maps_web_components_markers]
 // This example adds a map with markers, using web components.
+// [START maps_web_components_markers_initmap]
 async function initMap() {
-  const { Map } = await google.maps.importLibrary("maps");
-  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
-
   console.log("Maps JavaScript API loaded.");
 }
 
-initMap();
+window.initMap = initMap;
 // [END maps_web_components_markers]
diff --git a/dist/samples/web-components-markers/iframe/index.html b/dist/samples/web-components-markers/iframe/index.html
index 7bb6dbf997..4c5104990d 100644
--- a/dist/samples/web-components-markers/iframe/index.html
+++ b/dist/samples/web-components-markers/iframe/index.html
@@ -6,10 +6,10 @@
 -->
 <html>
   <head>
-    <title>Add a Map with Markers using Web Components</title>
+    <title>Add a Map with Markers using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 
-    <script type="module" crossorigin src="./assets/index-Kc8tqVj6.js"></script>
+    <script type="module" crossorigin src="./assets/index-Rz0jDNVK.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-hqGKW_OM.css" />
   </head>
   <body>
@@ -24,8 +24,16 @@
       ></gmp-advanced-marker>
     </gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-markers/jsfiddle/demo.details b/dist/samples/web-components-markers/jsfiddle/demo.details
index 4693ab19ed..eb344496b6 100644
--- a/dist/samples/web-components-markers/jsfiddle/demo.details
+++ b/dist/samples/web-components-markers/jsfiddle/demo.details
@@ -1,4 +1,4 @@
-name: Add a Map with Markers using Web Components
+name: Add a Map with Markers using HTML
 authors:
   - Justin Poehnelt
 tags:
diff --git a/dist/samples/web-components-markers/jsfiddle/demo.html b/dist/samples/web-components-markers/jsfiddle/demo.html
index fa08e58e82..81e4906121 100644
--- a/dist/samples/web-components-markers/jsfiddle/demo.html
+++ b/dist/samples/web-components-markers/jsfiddle/demo.html
@@ -6,7 +6,7 @@
 -->
 <html>
   <head>
-    <title>Add a Map with Markers using Web Components</title>
+    <title>Add a Map with Markers using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <!-- jsFiddle will insert css and js -->
   </head>
@@ -22,8 +22,16 @@
       ></gmp-advanced-marker>
     </gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-markers/jsfiddle/demo.js b/dist/samples/web-components-markers/jsfiddle/demo.js
index 9edc908195..911808db49 100644
--- a/dist/samples/web-components-markers/jsfiddle/demo.js
+++ b/dist/samples/web-components-markers/jsfiddle/demo.js
@@ -5,10 +5,7 @@
  */
 // This example adds a map with markers, using web components.
 async function initMap() {
-  const { Map } = await google.maps.importLibrary("maps");
-  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
-
   console.log("Maps JavaScript API loaded.");
 }
 
-initMap();
+window.initMap = initMap;
diff --git a/dist/samples/web-components-markers/playground/index.html b/dist/samples/web-components-markers/playground/index.html
index 901e77a91d..d6c0c8770f 100644
--- a/dist/samples/web-components-markers/playground/index.html
+++ b/dist/samples/web-components-markers/playground/index.html
@@ -1,6 +1,6 @@
 <html>
   <head>
-    <title>Add a Map with Markers using Web Components</title>
+    <title>Add a Map with Markers using HTML</title>
     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
     <!-- playground-hide -->
     <script>
@@ -25,8 +25,16 @@
       ></gmp-advanced-marker>
     </gmp-map>
 
-    <!-- prettier-ignore -->
-    <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
+    <!-- 
+      The `defer` attribute causes the callback to execute after the full HTML
+      document has been parsed. For non-blocking uses, avoiding race conditions,
+      and consistent behavior across browsers, consider loading using Promises.
+      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
+      for more information.
+      -->
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/dist/samples/web-components-markers/playground/index.ts b/dist/samples/web-components-markers/playground/index.ts
index b456da4f55..f0d1acc4ed 100644
--- a/dist/samples/web-components-markers/playground/index.ts
+++ b/dist/samples/web-components-markers/playground/index.ts
@@ -1,14 +1,11 @@
 // This example adds a map with markers, using web components.
 async function initMap(): Promise<void> {
-  const { Map } = (await google.maps.importLibrary(
-    "maps",
-  )) as google.maps.MapsLibrary;
-  const { AdvancedMarkerElement } = (await google.maps.importLibrary(
-    "marker",
-  )) as google.maps.MarkerLibrary;
-
   console.log("Maps JavaScript API loaded.");
 }
-
-initMap();
+declare global {
+  interface Window {
+    initMap: () => void;
+  }
+}
+window.initMap = initMap;
 export {};
