How to detect Google places AutoComplete load issues?

Question

I'm using the API successfully but encountered an error this morning with "OOPS! Something went wrong" sitting in the textbox and the user cannot type into it. I found the issue to be key related and fixed, however, this brought to light that some issue may arise and the user cannot complete because of this blocking. I'd like to be able to detect in javascript if there is some issue with the google.maps.places.Autocomplete object and not bind it to the textbox.

Answer 1

For anyone else wanting to do this.

Thanks to the folks for the idea over at: Capturing javascript console.log?

// error filter to capture the google error
(function () {
    var oldError = console.error;

    console.error = function (message) {
        if (message.toLowerCase().includes("google maps api error")) {
            document.getElementById('<%=hdnGoogleSelected.ClientID %>').value = "DISABLE";
            triggerUpdatePanel();
            //alert(message);
        }

        oldError.apply(console, arguments);
    };
})();

Mine is in an update panel so I triggered the update which sets the onfocus back to this.select(); for the textbox which effectively disables the autocomplete attempts.

tbAddress1.Attributes["onfocus"] = "javascript:this.select();";

Answer 2

Another option: Google will return an error after about 5 seconds from loading. "gm-err-autocomplete" class indicates any error with the autocomplete component.

You can periodically check for the error class google returns. I do it for 10 seconds after loading:

function checkForGoogleApiErrors() {
    var secCounter = 0;
    var googleErrorCheckinterval = setInterval(function () {
        if (document.getElementById("AddressAutocomplete").classList.contains("gm-err-autocomplete")) {
            console.log("error detected");
            clearInterval(googleErrorCheckinterval);
        }
        secCounter++;
        if (secCounter === 10){
            clearInterval(googleErrorCheckinterval);
        }
    }, 1000);
}