title: Add a minimum of characters and delay google maps autocomplete API
body: <p>I would like to make the autocomplete function start only if there are at least 3 characters in my input and that it starts only after 3 seconds of delay from the last change of my input.</p>
  <p>How can I do? Below I leave you the function that starts my inputs inside my form.</p>
  <p>I followed the official google documentation to add the autocomplete to my form</p>
  <p>This is my Javascript code</p>
  <pre><code>&quot;use strict&quot;;
  
  function initMap() {
    const componentForm = [
      'location',
      'locality',
    ];
    const autocompleteInput = document.getElementById('partenza');
    const autocompleteInputDestinazione = document.getElementById('destinazione');
    //Partenza
    const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
      componentRestrictions: { country: &quot;it&quot; },
      fields: [&quot;address_components&quot;, &quot;geometry&quot;, &quot;name&quot;],
    });
    autocomplete.addListener('place_changed', function () {
      const place = autocomplete.getPlace();
      if (!place.geometry) {
        // User entered the name of a Place that was not suggested and
        // pressed the Enter key, or the Place Details request failed.
        window.alert('Nessun indirizzo trovato a: \'' + place.name + '\'');
        return;
      }
      renderAddress(place);
      fillInAddress(place);
    });
      
  
    //Destinazione
    const autocompleteDestinazione = new google.maps.places.Autocomplete(autocompleteInputDestinazione, {
      componentRestrictions: { country: &quot;it&quot; },
      fields: [&quot;address_components&quot;, &quot;geometry&quot;, &quot;name&quot;],
    });
    autocompleteDestinazione.addListener('place_changed', function () {
      const place = autocompleteDestinazione.getPlace();
      if (!place.geometry) {
        // User entered the name of a Place that was not suggested and
        // pressed the Enter key, or the Place Details request failed.
        window.alert('Nessun indirizzo trovato a: \'' + place.name + '\'');
        return;
      }
      renderAddress(place);
      fillInAddress(place);
    });
  
    function fillInAddress(place) {  // optional parameter
      const addressNameFormat = {
        'street_number': 'short_name',
        'route': 'long_name',
        'locality': 'long_name',
      };
      const getAddressComp = function (type) {
        for (const component of place.address_components) {
          if (component.types[0] === type) {
            return component[addressNameFormat[type]];
          }
        }
        return '';
      };
      document.getElementById('partenza').value = getAddressComp('street_number') + ' '
                + getAddressComp('route');
      document.getElementById('destinazione').value = getAddressComp('street_number') + ' '
                + getAddressComp('route');
      for (const component of componentForm) {
        // Location field is handled separately above as it has different logic.
        if (component !== 'location') {
          document.getElementById(component).value = getAddressComp(component);
        }
      }
    }
  
    function renderAddress(place) {
      map.setCenter(place.geometry.location);
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);
    }
  }
  </code></pre>