How to use normal input if google Maps JavaScript API Autocomplete widget returns an error?

Question

I am using Google Maps JavaScript API Autocomplete widget, https://developers.google.com/maps/documentation/javascript/place-autocomplete#add-autocomplete.

If there is an error with the google api, it renders the input field disabled so the user is unable to enter an address. This happens a couple seconds after typing into the input field. This is what the input changes to when there is an error with the google api (in this case invalid api key)

<input class="form-textbox pac-target-input gm-err-autocomplete" id="PatientStreet" name="PatientStreet" placeholder="Oops! Something went wrong." type="text" value="" autocomplete="off" disabled="" style="background-image: url(&quot;https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png&quot;);">

const patientStreet = document.getElementById('PatientStreet');

const componentForm = {
    street_number: 'short_name',
    route: 'short_name', // street name
    locality: 'long_name', // city
    administrative_area_level_3: 'long_name', // county
    administrative_area_level_1: 'long_name', // state
    postal_code: 'short_name',
    subpremise: 'short_name' // apt number
};

function initAutoComplete() {
    autocomplete = new google.maps.places.Autocomplete(patientStreet,
        {
            types: ['address'],
            componentRestrictions: { 'country': 'us' },
            fields: ['address_components']
        });

    googleAutoCompleteEventListener = autocomplete.addListener('place_changed', onPlaceChanged);
}

function onPlaceChanged() {
    const place = autocomplete.getPlace();
    // code that places addressType in proper input fields
}

<form>
<input class="form-textbox" id="PatientStreet" name="PatientStreet" placeholder="123 Main Street" type="text" value="" autocomplete="off">
</form>

<script src="https://maps.googleapis.com/maps/api/js?key=invalidKey&libraries=places&region=US&callback=initAutoComplete" async defer></script>

I tried adding this function to my script,

function gm_authFailure() {
    google.maps.event.removeListener(googleAutoCompleteEventListener);
    google.maps.event.clearInstanceListeners(patientStreet);
}

and stored the autocomplete listener in a variable

let googleAutoCompleteEventListener;
function initiAutoComplete() {
  autocomplete = new google.maps.places.Autocomplete(patientStreet,
      {
          types: ['address'],
          componentRestrictions: { 'country': 'us' },
          fields: ['address_components']
      });

  googleAutoCompleteEventListener = autocomplete.addListener('place_changed', onPlaceChanged);
}

but it still renders the input disabled with the icon. How do I configure it so if there is an error with the autocomplete api, the user can still enter in an address and complete the form?

Answer 1

Adding the gm_authFailure function and removing the disabled attribute and google classes solved my issue of not being able to enter in the street field if the google api failed.

const patientStreet = document.getElementById('PatientStreet');
let autocomplete;
let googleAutoCompleteEventListener;

const componentForm = {
    street_number: 'short_name',
    route: 'short_name', // street name
    locality: 'long_name', // city
    administrative_area_level_3: 'long_name', // county
    administrative_area_level_1: 'long_name', // state
    postal_code: 'short_name',
    subpremise: 'short_name' // apt number
};

function initAutoComplete() {
    autocomplete = new google.maps.places.Autocomplete(patientStreet,
        {
            types: ['address'],
            componentRestrictions: { 'country': 'us' },
            fields: ['address_components']
        });

    googleAutoCompleteEventListener = autocomplete.addListener('place_changed', onPlaceChanged);
}

function onPlaceChanged() {
    const place = autocomplete.getPlace();
    // code that places addressType in proper input fields
}

function gm_authFailure() {
    google.maps.event.removeListener(googleAutoCompleteEventListener);
    google.maps.event.clearInstanceListeners(patientStreet);
    patientStreet.removeAttribute('disabled');
    patientStreet.classList.remove('pac-target-input');
    patientStreet.classList.remove('gm-err-autocomplete');
    patientStreet.style.backgroundImage = 'none';
    patientStreet.placeholder = '123 Main St';
    patientStreet.focus();
}

<form>
<input class="form-textbox" id="PatientStreet" name="PatientStreet" placeholder="123 Main Street" type="text" value="" autocomplete="off">
</form>

<script src="https://maps.googleapis.com/maps/api/js?key=invalidKey&libraries=places&region=US&callback=initAutoComplete" async defer></script>

I can't seem to find anymore info on the gm_authFailure function in the google docs, https://developers.google.com/maps/documentation/javascript/events. I am not sure if this will handle other errors like if I go over the rate limit. If anyone knows the answer to that or has a better solution please let me know.