Error: The Google Maps JavaScript API could not load.

[tarochipz]

I am seeing a bunch of Error: The Google Maps JavaScript API could not load. errors in our Sentry. But there is no additional information on the error.

1. Is it possible to add more information in this error so we can tell what the actual issue is ?
2. Can you help confirm the following:

• This post says ”The API session token expires if someone leaves a map open for more than about 24 hours, so it's normal to see a low level of these errors. (This is the intended behavior)”. The majority of this error (not all though) comes from our app /logout URL -- would a session expiry lead to this error ? Our app session timeout redirects users to the /logout url but it's max 20 minutes.
• What else could potentially cause this error (aside from things like network issues) ?

This is how we're using the loader in our app wrapper:

import { Loader } from '@googlemaps/js-api-loader'
...
...
const googleMapsLoader = new Loader({
  apiKey: (window as any).GoogleMapsKey,
  version: 'weekly',
  libraries: ['places'],
})
googleMapsLoader.importLibrary('places').catch((error: Error) => {
  console.error(error)
  diagnostics.captureException(error)
})
...

This is the Sentry error:

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

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

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[usefulthink]

According to the screenshot, the error-message is created in the onerror event-handler of the script-tag used to load the Google Maps API. That would be this here in the sourcecode: https://github.com/googlemaps/js-api-loader/blob/main/src/index.ts#L545

Since the error event is a generic html event, it doesn't come with any extra information. According to the specification:

A user agent MUST dispatch this event when a resource failed to load, or has been loaded but cannot be interpreted according to its semantics, such as an invalid image, a script execution error, or non-well-formed XML.

I think we can safely exclude the possibility of the script failing to parse, which would leave us with only the "failed to load" part, which could have a lot of reasons, like network availability, content-blockers and the like.

[tarochipz]

Agree that network availability, content-blockers etc. would be the cause. But I'm also wondering about question #2, because we've seen an increase of this error recently on /logout for a specific client's application instance.

[usefulthink]

I'm relatively sure that once the script is loaded there's no way to trigger the script error-event. Things like uncaught exceptions happening in the js runtime would trigger the window.onerror handler, but not the error-handler of the script itself.

[tarochipz]

Got it, thank you 🙏

[wangela]

Seems like this is answered; please reopen if you feel there are unresolved questions.

[phongm]

May I know if your problem is solved? I also have the same problem. @tarochipz