Error handling Google Place Api. If the api key is restricted input becomes blank

Question

I've added to my Reactjs app the Google Address autocomplete feature. It works fine but I realised that for instance if I restrict my API key the input becomes grey and no input at all can be added. Without that input the app won't work at all therefore I was looking for a condition to check if the api key is working or not but I couldn't find anything so far.

const googleUrl = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_API_KEY}&libraries=places`;

 {googleUrl && <Script url={googleUrl} onLoad={handleScriptLoad} />}
            <input
              type="text"
              name="where"
              placeholder="Where do you want to eat?"
              value={where}
              onChange={handleChange}
              id="autocomplete"
            />

For the full code https://github.com/mugg84/RestaurantFinder.git in DisplaySearchBar.js you can find the above mentioned input.

Thanks for your help!

Answer 1

If you want to listen to authentication failures you need to use gm_authFailure(). Its documentation is at the bottom of this page: https://developers.google.com/maps/documentation/javascript/events

In my component I've added this lines and the input doesn't get disabled anymore

  // If google API authentication problem
  window.gm_authFailure = () => {
    document.getElementById('autocomplete').disabled = false;
    document.getElementById('autocomplete').placeholder =
      'Where do you want to eat?';
    document.getElementById('autocomplete').style.backgroundImage = '';
    document.getElementById('autocomplete').style.paddingLeft = '1rem';
  };