status is always "success" on invalid API Key

[andrmoel]

I do have the following code example. The API key is not valid. I expect this component to get an ERROR status in case the API key is invalid. But what I get is a SUCCESS status.

<Wrapper apiKey="I am an invalid API Key" render={(status) => {
    console.log('STATUS: ' + status);

    return <div/>;
}}/>

For me, it looks like a bug. Or is this behavior wanted?

[wangela]

@andrmoel Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Support Console - If you have a support contract.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag
• Google Maps Platform issue trackers

This is an automated message, feel free to ignore.

[nora-soderlund]

This would be an issue with the @googlemaps/js-api-loader package, see: https://github.com/googlemaps/react-wrapper/blob/main/src/index.tsx#L83

But from a quick look, it doesn't seem like the JavaScript API supports any error handling for API key issues other than its own error handling. The "error" status here would only appear if the JavaScript API itself couldn't be fetched or parsed from the Google API server.

[usefulthink]

That is something that just can't be implemented with the way the Google Maps API is loaded.

The reason is relatively simple: The API key is not (and can't be) validated on the server. So when the API is loaded, it doesn't yet know if the key is valid. This validation needs another request that is sent after the API is loaded.

In order to avoid delaying your map initialization any more than neccessary, the API will report load success once it is ready to be used. Validating the API key happens "in the background".

There is only one way to know that the API key is invalid: you can specify a callback function window.gm_authFailure that will get called if the validation fails. But when this is called (if even), the initialization is likely already complete.