Add a minimum of characters and delay google maps autocomplete API

Question

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.

How can I do? Below I leave you the function that starts my inputs inside my form.

I followed the official google documentation to add the autocomplete to my form

This is my Javascript code

"use strict";

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: "it" },
    fields: ["address_components", "geometry", "name"],
  });
  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: "it" },
    fields: ["address_components", "geometry", "name"],
  });
  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);
  }
}

Answer 1

This isn't supported. If you insist on that logic, you will need to implement the component with google.maps.placesAutocompleteService. This will require you to manage the dropdown, input listeners, etc. See this sample for a start.

Note, there is no additional charge for the earlier requests as they are part of the same autocomplete session.