// DOM RefsconstaddressForm=document.getElementById('address-form');constvalidateButton=document.getElementById('validate-button');constclearFormButton=document.getElementById('clear-form-button');constresultDisplay=document.getElementById('result-display');constloadingText=document.getElementById('loading-text');// Input field refsconststreetAddress1Input=document.getElementById('street-address-1')asHTMLInputElement;conststreetAddress2Input=document.getElementById('street-address-2')asHTMLInputElement;constcityInput=document.getElementById('city')asHTMLInputElement;conststateInput=document.getElementById('state')asHTMLInputElement;constzipCodeInput=document.getElementById('zip-code')asHTMLInputElement;constregionSelect=document.getElementById('region-select')asHTMLSelectElement;constexampleSelect=document.getElementById('example-select')asHTMLSelectElement;// Core Initializationasyncfunctioninit(){// Load the Address Validation library.awaitgoogle.maps.importLibrary('addressValidation');// Set event listenersaddressForm!.addEventListener('submit',handleValidationSubmit);exampleSelect!.addEventListener('change',handleExampleSelectChange);clearFormButton!.addEventListener('click',handleClearForm);}// Validation HandlerasyncfunctionhandleValidationSubmit(event){event.preventDefault();// Prevent default form submissionresultDisplay!.textContent='Validating...';// Clear previous results// Validate the addresstry{//prettier-ignore//@ts-ignoreconstresult=awaitgoogle.maps.addressValidation.AddressValidation.fetchAddressValidation({address:{regionCode:regionSelect!.value.trim(),languageCode:'en',addressLines:[streetAddress1Input!.value.trim(),streetAddress2Input!.value.trim(),].filter((line)=>line),// Filter out empty lineslocality:cityInput!.value.trim(),administrativeArea:stateInput!.value.trim(),postalCode:zipCodeInput!.value.trim(),},});resultDisplay!.textContent='Verdict summary\n================\n'+`Formatted address:${result.address.formattedAddress}\n`+`Entered:${result.verdict.inputGranularity}\n`+`Validated:${result.verdict.validationGranularity}\n`+`Geocoded:${result.verdict.geocodeGranularity}\n`+`Possible next action:${result.verdict.possibleNextAction}\n\n`+`${getVerdictMessage(result.verdict,'addressComplete')}\n`+`${getVerdictMessage(result.verdict,'hasUnconfirmedComponents')}\n`+`${getVerdictMessage(result.verdict,'hasInferredComponents')}\n`+`${getVerdictMessage(result.verdict,'hasReplacedComponents')}\n\n`+`Raw JSON response\n=================\n`+JSON.stringify(result,null,'  ');}catch(error){console.error('Validation failed:',error);if(errorinstanceofError){resultDisplay!.textContent=`Error:${error.message}`;}}}// Verdict messagesconstverdictMessages={addressComplete:{trueMessage:'- The API found no unresolved, unexpected, or missing address elements.',falseMessage:'- At least one address element is unresolved, unexpected, or missing.',},hasUnconfirmedComponents:{trueMessage:"- The API can't confirm at least one address component.",falseMessage:'- The API confirmed all address components.',},hasInferredComponents:{trueMessage:'- The API inferred (added) at least one address component.',falseMessage:'- The API did not infer (add) any address components.',},hasReplacedComponents:{trueMessage:'- The API replaced at least one address component.',falseMessage:'- The API did not replace any address components.',},};// Helper function to get the verdict message for a given verdict keyfunctiongetVerdictMessage(verdict,key){if(!verdict||!verdictMessages[key])return'Unknown';returnverdict[key]?verdictMessages[key].trueMessage:verdictMessages[key].falseMessage;}// Handler for Dropdown ChangefunctionhandleExampleSelectChange(event){constselectedValue=event.target.value;if(selectedValue &&examples[selectedValue]){populateAddressFields(examples[selectedValue]);}elseif(!selectedValue){populateAddressFields(null);// Pass null to clear fields}}// Clear Form HandlerfunctionhandleClearForm(){streetAddress1Input!.value='';streetAddress2Input!.value='';cityInput!.value='';stateInput!.value='';zipCodeInput!.value='';regionSelect!.value='';exampleSelect!.value='';resultDisplay!.textContent='Result will appear here...';console.log('Cleared form');}// Example Address Dataconstexamples={google:{streetAddress1:'1600 Amphitheatre Parkway',streetAddress2:'',// Explicitly emptycity:'Mountain View',state:'CA',zipCode:'94043',region:'US',},nonExistentSubpremise:{streetAddress1:'2930 Pearl St.',streetAddress2:'Suite 100',city:'Boulder',state:'CO',zipCode:'',// Explicitly emptyregion:'US',},missingSubpremise:{streetAddress1:'500 West 2nd Street',streetAddress2:null,// Can use null or undefined toocity:'Austin',state:'TX',zipCode:'78701',region:'US',},misspelledLocality:{streetAddress1:'1600 Amphitheatre Pkwy',streetAddress2:'',city:'Montan View',state:'CA',zipCode:'94043',region:'US',},missingLocality:{streetAddress1:'Brandschenkestrasse 110 8002',streetAddress2:'',city:'',state:'',zipCode:'',region:'',},usPoBox:{streetAddress1:'PO Box 1108',streetAddress2:'',city:'Sterling',state:'VA',zipCode:'20166-1108',region:'US',},};// Helper function to populate form fields with example address datafunctionpopulateAddressFields(exampleAddress){if(!exampleAddress){console.warn('No example address data provided.');return;}// Get values from example, providing empty string as defaultstreetAddress1Input!.value=exampleAddress.streetAddress1||'';streetAddress2Input!.value=exampleAddress.streetAddress2||'';cityInput!.value=exampleAddress.city||'';stateInput!.value=exampleAddress.state||'';zipCodeInput!.value=exampleAddress.zipCode||'';regionSelect!.value=exampleAddress.region||'';// Clear previous results and errorsresultDisplay!.textContent='Result will appear here...';console.log('Populated fields with example: ',exampleAddress);}init();
index.ts

// DOM RefsconstaddressForm=document.getElementById('address-form');constvalidateButton=document.getElementById('validate-button');constclearFormButton=document.getElementById('clear-form-button');constresultDisplay=document.getElementById('result-display');constloadingText=document.getElementById('loading-text');// Input field refsconststreetAddress1Input=document.getElementById('street-address-1');conststreetAddress2Input=document.getElementById('street-address-2');constcityInput=document.getElementById('city');conststateInput=document.getElementById('state');constzipCodeInput=document.getElementById('zip-code');constregionSelect=document.getElementById('region-select');constexampleSelect=document.getElementById('example-select');// Core Initializationasyncfunctioninit(){// Load the Address Validation library.awaitgoogle.maps.importLibrary('addressValidation');// Set event listenersaddressForm.addEventListener('submit',handleValidationSubmit);exampleSelect.addEventListener('change',handleExampleSelectChange);clearFormButton.addEventListener('click',handleClearForm);}// Validation HandlerasyncfunctionhandleValidationSubmit(event){event.preventDefault();// Prevent default form submissionresultDisplay.textContent='Validating...';// Clear previous results// Validate the addresstry{//prettier-ignore//@ts-ignoreconstresult=awaitgoogle.maps.addressValidation.AddressValidation.fetchAddressValidation({address:{regionCode:regionSelect.value.trim(),languageCode:'en',addressLines:[streetAddress1Input.value.trim(),streetAddress2Input.value.trim(),].filter((line)=>line),// Filter out empty lineslocality:cityInput.value.trim(),administrativeArea:stateInput.value.trim(),postalCode:zipCodeInput.value.trim(),},});resultDisplay.textContent='Verdict summary\n================\n'+`Formatted address:${result.address.formattedAddress}\n`+`Entered:${result.verdict.inputGranularity}\n`+`Validated:${result.verdict.validationGranularity}\n`+`Geocoded:${result.verdict.geocodeGranularity}\n`+`Possible next action:${result.verdict.possibleNextAction}\n\n`+`${getVerdictMessage(result.verdict,'addressComplete')}\n`+`${getVerdictMessage(result.verdict,'hasUnconfirmedComponents')}\n`+`${getVerdictMessage(result.verdict,'hasInferredComponents')}\n`+`${getVerdictMessage(result.verdict,'hasReplacedComponents')}\n\n`+`Raw JSON response\n=================\n`+JSON.stringify(result,null,'  ');}catch(error){console.error('Validation failed:',error);if(errorinstanceofError){resultDisplay.textContent=`Error:${error.message}`;}}}// Verdict messagesconstverdictMessages={addressComplete:{trueMessage:'- The API found no unresolved, unexpected, or missing address elements.',falseMessage:'- At least one address element is unresolved, unexpected, or missing.',},hasUnconfirmedComponents:{trueMessage:"- The API can't confirm at least one address component.",falseMessage:'- The API confirmed all address components.',},hasInferredComponents:{trueMessage:'- The API inferred (added) at least one address component.',falseMessage:'- The API did not infer (add) any address components.',},hasReplacedComponents:{trueMessage:'- The API replaced at least one address component.',falseMessage:'- The API did not replace any address components.',},};// Helper function to get the verdict message for a given verdict keyfunctiongetVerdictMessage(verdict,key){if(!verdict||!verdictMessages[key])return'Unknown';returnverdict[key]?verdictMessages[key].trueMessage:verdictMessages[key].falseMessage;}// Handler for Dropdown ChangefunctionhandleExampleSelectChange(event){constselectedValue=event.target.value;if(selectedValue &&examples[selectedValue]){populateAddressFields(examples[selectedValue]);}elseif(!selectedValue){populateAddressFields(null);// Pass null to clear fields}}// Clear Form HandlerfunctionhandleClearForm(){streetAddress1Input.value='';streetAddress2Input.value='';cityInput.value='';stateInput.value='';zipCodeInput.value='';regionSelect.value='';exampleSelect.value='';resultDisplay.textContent='Result will appear here...';console.log('Cleared form');}// Example Address Dataconstexamples={google:{streetAddress1:'1600 Amphitheatre Parkway',streetAddress2:'',// Explicitly emptycity:'Mountain View',state:'CA',zipCode:'94043',region:'US',},nonExistentSubpremise:{streetAddress1:'2930 Pearl St.',streetAddress2:'Suite 100',city:'Boulder',state:'CO',zipCode:'',// Explicitly emptyregion:'US',},missingSubpremise:{streetAddress1:'500 West 2nd Street',streetAddress2:null,// Can use null or undefined toocity:'Austin',state:'TX',zipCode:'78701',region:'US',},misspelledLocality:{streetAddress1:'1600 Amphitheatre Pkwy',streetAddress2:'',city:'Montan View',state:'CA',zipCode:'94043',region:'US',},missingLocality:{streetAddress1:'Brandschenkestrasse 110 8002',streetAddress2:'',city:'',state:'',zipCode:'',region:'',},usPoBox:{streetAddress1:'PO Box 1108',streetAddress2:'',city:'Sterling',state:'VA',zipCode:'20166-1108',region:'US',},};// Helper function to populate form fields with example address datafunctionpopulateAddressFields(exampleAddress){if(!exampleAddress){console.warn('No example address data provided.');return;}// Get values from example, providing empty string as defaultstreetAddress1Input.value=exampleAddress.streetAddress1||'';streetAddress2Input.value=exampleAddress.streetAddress2||'';cityInput.value=exampleAddress.city||'';stateInput.value=exampleAddress.state||'';zipCodeInput.value=exampleAddress.zipCode||'';regionSelect.value=exampleAddress.region||'';// Clear previous results and errorsresultDisplay.textContent='Result will appear here...';console.log('Populated fields with example: ',exampleAddress);}init();
index.js

<html>    <head>        <title>Address Validation</title>        <link rel="stylesheet" type="text/css" href="./style.css" />        <script type="module" src="./index.js"></script>    </head>    <body>        <!-- Address Validation Form Container -->        <div>            <!-- Header -->            <div>                <h2>Address Validation</h2>            </div>            <!-- Content: Address Form -->            <form autocomplete="off">                <!-- Example Dropdown Section -->                <div                                      >                    <label for="example-select"                        >Load Example Address:</label                    >                    <select                                               name="exampleSelect"                       >                        <option value="" selected disabled>                            -- Select an Example --                        </option>                        <option value="google">Valid Address</option>                        <option value="nonExistentSubpremise">                            Non-existent Subpremise                        </option>                        <option value="missingSubpremise">                            Missing Subpremise                        </option>                        <option value="misspelledLocality">                            Misspelled Locality                        </option>                        <option value="missingLocality">                            Missing Locality                        </option>                        <option value="usPoBox">US PO Box</option>                    </select>                </div>                <div>                    <label for="street-address-1">Street Address 1</label>                    <input                                               name="streetAddress1"                        type="text"                        placeholder="e.g., 1600 Amphitheatre Parkway" />                </div>                <div>                    <label for="street-address-2"                        >Street Address 2 (Optional)</label                    >                    <input                                               name="streetAddress2"                        type="text"                        placeholder="e.g., Suite 100" />                </div>                <!-- Use a div with grid class for City/State/ZIP layout -->                <div>                    <div>                        <label for="city">City</label>                        <input                                                       name="city"                            type="text"                            placeholder="e.g., Mountain View" />                    </div>                    <div>                        <label for="state">State or territory</label>                        <input                                                       name="state"                            type="text"                            placeholder="e.g., CA" />                    </div>                    <div>                        <label for="zip-code">ZIP Code</label>                        <input                                                       name="zipCode"                            type="text"                            placeholder="e.g., 94043" />                    </div>                </div>                <div>                    <div>                        <label for="region-select">Region</label>                        <select                                                       name="regionSelect"                           >                            <option value="AR">Argentina</option>                            <option value="AU">Australia</option>                            <option value="AT">Austria</option>                            <option value="BE">Belgium</option>                            <option value="BR">Brazil</option>                            <option value="BG">Bulgaria</option>                            <option value="CA">Canada</option>                            <option value="CL">Chile</option>                            <option value="CO">Colombia</option>                            <option value="HR">Croatia</option>                            <option value="CZ">Czechia</option>                            <option value="DK">Denmark</option>                            <option value="EE">Estonia</option>                            <option value="FI">Finland</option>                            <option value="FR">France</option>                            <option value="DE">Germany</option>                            <option value="HU">Hungary</option>                            <option value="IN">India</option>                            <option value="IE">Ireland</option>                            <option value="IT">Italy</option>                            <option value="JP">Japan</option>                            <option value="LV">Latvia</option>                            <option value="LT">Lithuania</option>                            <option value="LU">Luxembourg</option>                            <option value="MY">Malaysia</option>                            <option value="MX">Mexico</option>                            <option value="NL">Netherlands</option>                            <option value="NO">Norway</option>                            <option value="NZ">New Zealand</option>                            <option value="PL">Poland</option>                            <option value="PT">Portugal</option>                            <option value="PR">Puerto Rico</option>                            <option value="SG">Singapore</option>                            <option value="SK">Slovakia</option>                            <option value="SI">Slovenia</option>                            <option value="ES">Spain</option>                            <option value="SE">Sweden</option>                            <option value="CH">Switzerland</option>                            <option value="GB">United Kingdom</option>                            <option value="US" selected>United States</option>                            <option value="">Unknown</option>                        </select>                    </div>                </div>                <button type="submit">                    Validate Address                </button>                <button                                       type="button"                    event="handleClearForm">                    Clear Form                </button>                <!-- Result Display Area -->                <div>                    <label for="result-display"                        >Validation Result (formatted address and JSON)</label                    >                    <pre>Result will appear here...</pre>                </div>            </form>        </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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>    </body></html>
index.html