Fix Google Maps loading Performance

blocks/avm-report/avm-report.css

@@ -43,6 +43,9 @@
   width: 67px;
 }
 
+.avm-report.block form button[type="submit"] {
+  transition: all .3s ease-in;
+}
 
 @media screen and (min-width: 600px) {
   .avm-report.block {

blocks/avm-report/avm-report.js

@@ -1,23 +1,8 @@
-import {
-  showModal,
-} from '../../scripts/util.js';
-
-let alreadyDeferred = false;
-function initGooglePlacesAPI() {
-  if (alreadyDeferred) {
-    return;
-  }
-  alreadyDeferred = true;
-  const script = document.createElement('script');
-  script.type = 'text/partytown';
-  script.innerHTML = `
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = '${window.hlx.codeBasePath}/blocks/avm-report/avm-report-delayed.js';
-    document.head.append(script);
-  `;
-  document.head.append(script);
-}
+import { showModal } from '../../scripts/util.js';
+
+import loadMaps from '../../scripts/google-maps/index.js';
+
+let autocompleteAttached = false;
 
 export default async function decorate(block) {
   const form = document.createElement('form');
@@ -32,6 +17,19 @@ export default async function decorate(block) {
 
   const addressField = form.querySelector('input[name="avmaddress"]');
 
+  addressField.addEventListener('focus', async () => {
+    if (!autocompleteAttached) {
+      loadMaps();
+      await window.google.maps.importLibrary('places');
+      // eslint-disable-next-line no-unused-vars
+      const autocomplete = new window.google.maps.places.Autocomplete(addressField, {
+        fields: ['formatted_address'],
+        types: ['address'],
+      });
+      autocompleteAttached = true;
+    }
+  });
+
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const address = addressField.value;
@@ -49,5 +47,4 @@ export default async function decorate(block) {
     window.location = redirect;
   });
   block.append(form);
-  initGooglePlacesAPI();
 }

scripts/google-maps/index.js

@@ -0,0 +1,21 @@
+import { getMetadata } from '../aem.js';
+
+let loaded = false;
+
+/* eslint-disable */
+const scriptFunc = (key) => {
+  (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,
+    v: "weekly",
+    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
+    // Add other bootstrap parameters as needed, using camel case.
+  });
+};
+/* eslint-enable */
+
+export default function loadMaps() {
+  if (!loaded) {
+    loaded = true;
+    scriptFunc(getMetadata('google-maps-api-key'));
+  }
+}