इस पेज का अनुवाद Cloud Translation API से किया गया है.

पते की पुष्टि करने की सुविधा का डेमो

यह प्रॉडक्ट या सुविधा, झलक (Pre-GA) के तौर पर उपलब्ध है. ऐसा हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं के लिए, आपको सीमित सहायता ही मिले. साथ ही, Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA के अन्य वर्शन के साथ काम न करें. Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं पर, Google Maps Platform की सेवा की खास शर्तें लागू होती हैं. ज़्यादा जानकारी के लिए, लॉन्च के चरण के बारे में जानकारी देखें.

पते की पुष्टि करने की सुविधा आज़माएं

इस डेमो का इस्तेमाल करके, पते की पुष्टि करने वाले एपीआई को आज़माएं. इसके लिए, किसी ऐसे इलाके का कोई भी पता इस्तेमाल करें जहां यह सुविधा काम करती है. डेमो में, पते के कॉम्पोनेंट को इनपुट के तौर पर लिया जाता है और पुष्टि करने का जवाब नीचे दिखाया जाता है. बिना क्रम के दिए गए पते को पार्स करने के लिए, पहला पता फ़ील्ड में पूरा पता डालें. फ़ॉर्म में सबसे ऊपर मौजूद ड्रॉप-डाउन से, पतों के उदाहरण चुनें.

TypeScript

// --- DOM Refs
const addressForm = document.getElementById('address-form');
const validateButton = document.getElementById('validate-button');
const clearFormButton = document.getElementById('clear-form-button');
const resultDisplay = document.getElementById('result-display');
const loadingText = document.getElementById('loading-text');
// Input field refs
const streetAddress1Input = document.getElementById('street-address-1') as HTMLInputElement;
const streetAddress2Input = document.getElementById('street-address-2') as HTMLInputElement;
const cityInput = document.getElementById('city') as HTMLInputElement;
const stateInput = document.getElementById('state') as HTMLInputElement;
const zipCodeInput = document.getElementById('zip-code') as HTMLInputElement;
const regionSelect = document.getElementById('region-select') as HTMLSelectElement;
const exampleSelect = document.getElementById('example-select') as HTMLSelectElement;

// Core Initialization
async function init() {
  // Load the Address Validation library.
  await google.maps.importLibrary('addressValidation');
  // Set event listeners
  addressForm!.addEventListener('submit', handleValidationSubmit);
  exampleSelect!.addEventListener('change', handleExampleSelectChange);
  clearFormButton!.addEventListener('click', handleClearForm);
}

// Validation Handler
async function handleValidationSubmit(event) {
  event.preventDefault();  // Prevent default form submission
  resultDisplay!.textContent = 'Validating...';  // Clear previous results

  // Validate the address
  try {
    //@ts-ignore
    const result = await google.maps.addressValidation.AddressValidation.fetchAddressValidation({
      address: {
        regionCode: regionSelect!.value.trim(),
        languageCode: 'en',
        addressLines: [
          streetAddress1Input!.value.trim(),
          streetAddress2Input!.value.trim()
        ].filter(line => line),  // Filter out empty lines
        locality: 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\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 (error instanceof Error) {
      resultDisplay!.textContent = `Error: ${error.message}`;
    }
  } 
}

// --- Verdict Messages ---
const verdictMessages = {
  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 key
function getVerdictMessage(verdict, key) {
  if (!verdict || !verdictMessages[key]) return 'Unknown';
  return verdict[key] ? verdictMessages[key].trueMessage :
                        verdictMessages[key].falseMessage;
}

// Handler for Dropdown Change
function handleExampleSelectChange(event) {
  const selectedValue = event.target.value; // e.g., "google", "suite", ""
  if (selectedValue && examples[selectedValue]) {
      populateAddressFields(examples[selectedValue]);
  } else if (!selectedValue) {
      // Optional: Clear fields if the "-- Select --" option is chosen
      populateAddressFields(null); // Pass null to clear fields
  }
}

// Clear Form Handler
function handleClearForm() {
  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 Data
const examples = {
  google: {
      streetAddress1: '1600 Amphitheatre Parkway',
      streetAddress2: '', // Explicitly empty
      city: 'Mountain View',
      state: 'CA',
      zipCode: '94043',
      region: 'US'
  },
  nonExistentSubpremise: {
      streetAddress1: '2930 Pearl St.',
      streetAddress2: 'Suite 100',
      city: 'Boulder',
      state: 'CO',
      zipCode: '', // Explicitly empty
      region: 'US'
  },
  missingSubpremise: {
      streetAddress1: '500 West 2nd Street',
      streetAddress2: null, // Can use null or undefined too
      city: '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 data
function populateAddressFields(exampleAddress) {
  if (!exampleAddress) {
      console.warn("No example address data provided.");
      return;
  }

  // Get values from example, providing empty string as default
  streetAddress1Input!.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 errors
  resultDisplay!.textContent = 'Result will appear here...';

  console.log("Populated fields with example:", exampleAddress);
}

init();index.ts

JavaScript

// DOM Refs
const addressForm = document.getElementById('address-form');
const validateButton = document.getElementById('validate-button');
const clearFormButton = document.getElementById('clear-form-button');
const resultDisplay = document.getElementById('result-display');
const loadingText = document.getElementById('loading-text');
// Input field refs
const streetAddress1Input = document.getElementById('street-address-1');
const streetAddress2Input = document.getElementById('street-address-2');
const cityInput = document.getElementById('city');
const stateInput = document.getElementById('state');
const zipCodeInput = document.getElementById('zip-code');
const regionSelect = document.getElementById('region-select');
const exampleSelect = document.getElementById('example-select');
// Core Initialization
async function init() {
    // Load the Address Validation library.
    await google.maps.importLibrary('addressValidation');
    // Set event listeners
    addressForm.addEventListener('submit', handleValidationSubmit);
    exampleSelect.addEventListener('change', handleExampleSelectChange);
    clearFormButton.addEventListener('click', handleClearForm);
}
// Validation Handler
async function handleValidationSubmit(event) {
    event.preventDefault(); // Prevent default form submission
    resultDisplay.textContent = 'Validating...'; // Clear previous results
    // Validate the address
    try {
        //@ts-ignore
        const result = await google.maps.addressValidation.AddressValidation.fetchAddressValidation({
            address: {
                regionCode: regionSelect.value.trim(),
                languageCode: 'en',
                addressLines: [
                    streetAddress1Input.value.trim(),
                    streetAddress2Input.value.trim()
                ].filter(line => line), // Filter out empty lines
                locality: 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\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 (error instanceof Error) {
            resultDisplay.textContent = `Error: ${error.message}`;
        }
    }
}
// --- Verdict Messages ---
const verdictMessages = {
    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 key
function getVerdictMessage(verdict, key) {
    if (!verdict || !verdictMessages[key])
        return 'Unknown';
    return verdict[key] ? verdictMessages[key].trueMessage :
        verdictMessages[key].falseMessage;
}
// Handler for Dropdown Change
function handleExampleSelectChange(event) {
    const selectedValue = event.target.value; // e.g., "google", "suite", ""
    if (selectedValue && examples[selectedValue]) {
        populateAddressFields(examples[selectedValue]);
    }
    else if (!selectedValue) {
        // Optional: Clear fields if the "-- Select --" option is chosen
        populateAddressFields(null); // Pass null to clear fields
    }
}
// Clear Form Handler
function handleClearForm() {
    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 Data
const examples = {
    google: {
        streetAddress1: '1600 Amphitheatre Parkway',
        streetAddress2: '', // Explicitly empty
        city: 'Mountain View',
        state: 'CA',
        zipCode: '94043',
        region: 'US'
    },
    nonExistentSubpremise: {
        streetAddress1: '2930 Pearl St.',
        streetAddress2: 'Suite 100',
        city: 'Boulder',
        state: 'CO',
        zipCode: '', // Explicitly empty
        region: 'US'
    },
    missingSubpremise: {
        streetAddress1: '500 West 2nd Street',
        streetAddress2: null, // Can use null or undefined too
        city: '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 data
function populateAddressFields(exampleAddress) {
    if (!exampleAddress) {
        console.warn("No example address data provided.");
        return;
    }
    // Get values from example, providing empty string as default
    streetAddress1Input.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 errors
    resultDisplay.textContent = 'Result will appear here...';
    console.log("Populated fields with example:", exampleAddress);
}
init();index.js

सीएसएस

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    color: #333;
}

#sidebar {
    width: 800px;
    max-width: calc(100% - 2rem);
    background-color: #fff;
    border-color: #9ca3af;
    border-style: solid;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100% - 2rem);
}

.sidebar-header {
    padding: .75rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937
}

.sidebar-content {
    padding: .75rem;
    overflow-y: auto;
    flex-grow: 1
}

.sidebar-content::-webkit-scrollbar {
    width: 6px
}

.sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 3px
}

#address-form>div {
    margin-bottom: .75rem
}

#address-form>button {
    margin-top: 1rem
}

label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: .25rem
}

input[type=text] {
    width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    box-sizing: border-box;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

input[type=text]:focus {
    outline: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb
}

.form-grid-triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem
}

@media (max-width:400px) {
    .form-grid-triple {
        grid-template-columns: 1fr
    }
}

button {
    display: inline-block;
    margin-right: .5rem;
    width: auto;
    padding: .6rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: #fff;
    background-color: #2563eb;
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
    text-align: center
}

button:hover {
    background-color: #1d4ed8
}

#loading-indicator {
    margin-top: .5rem;
    font-size: .75rem;
    color: #2563eb;
    font-style: italic;
    display: none;
    align-items: center;
    gap: .5rem
}

.spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

#error-message {
    margin-top: .5rem;
    font-size: .75rem;
    color: #dc2626;
    font-weight: 500;
    display: none
}

#result-container {
    margin-top: 1rem;
    border-top: 1px solid #e5e7eb;
    padding-top: .75rem
}

#result-display {
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: .75rem;
    background-color: #f3f4f6;
    padding: .5rem;
    border-radius: .25rem;
    overflow-x: auto;
    white-space: pre;
    height: 12rem;
    border: 1px solid #e5e7eb
}

@media (max-width:767px) {
    #sidebar {
        width: auto;
        max-width: 100%;
        margin: 0;
        max-height: 70vh;
        border-radius: 0;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        border-top: 1px solid #d1d5db;
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, .1), 0 -2px 4px -1px rgba(0, 0, 0, .06)
    }
}

.form-select {
    display: block;
    width: 100%;
    padding: .5rem 2.5rem .5rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer
}

.form-select:focus {
    border-color: #2563eb;
    outline: 0;
    box-shadow: 0 0 0 1px #2563eb
}

.form-select option[disabled] {
    color: #9ca3af
}style.css

एचटीएमएल

<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 id="sidebar">
        <!-- Header -->
        <div class="sidebar-header">
          <h2>Address Validation</h2>
        </div>
        <!-- Content: Address Form -->
        <form id="address-form" class="sidebar-content" autocomplete="off">
          <!-- Example Dropdown Section -->
          <div id="example-dropdown-container" style="margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb;">
            <label for="example-select" style="margin-bottom: 0.5rem;">Load Example Address:</label>
            <select id="example-select" name="exampleSelect" class="form-select">
              <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
              id="street-address-1"
              name="streetAddress1"
              type="text"
              placeholder="e.g., 1600 Amphitheatre Parkway"
            />
          </div>
          <div>
            <label for="street-address-2">Street Address 2 (Optional)</label>
            <input
              id="street-address-2"
              name="streetAddress2"
              type="text"
              placeholder="e.g., Suite 100"
            />
          </div>
          <!-- Use a div with grid class for City/State/ZIP layout -->
          <div class="form-grid-triple">
            <div>
              <label for="city">City</label>
              <input id="city" name="city" type="text" placeholder="e.g., Mountain View" />
            </div>
            <div>
              <label for="state">State or territory</label>
              <input id="state" name="state" type="text" placeholder="e.g., CA" />
            </div>
            <div>
              <label for="zip-code">ZIP Code</label>
              <input id="zip-code" name="zipCode" type="text" placeholder="e.g., 94043" />
            </div>
          </div>
          <div id="region-select-container">
            <div>
              <label for="region-select">Region</label>
              <select id="region-select" name="regionSelect" class="form-select">
                <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 id="validate-button" type="submit">Validate Address</button>

          <button id="clear-form-button" type="button" event="handleClearForm">Clear Form</button>

          <!-- Result Display Area -->
          <div id="result-container">
            <label for="result-display">Validation Result (formatted address and JSON)</label>
            <pre id="result-display">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: "beta"});</script>
  </body>
</html>index.html

सैंपल आज़माएं

JSFiddle.net