Load google maps api's Places after page becomes online

[OscarCR88]

Environment details

1. Loading places library
2. Windows 10 Home
3. Library version: 1.11.2

Steps to reproduce

1. Create Angular component (any SPA would work)
2. Create function to load google maps SDK (loader.load....)
3. Browse the component offline (Obviously, google maps won't load)
4. Turn your connection ON
5. Reload the component without reloading the page
6. Google maps fail to load

Code example

 loadGoogleMapsSDK() {
    //configure google maps javascript API
    this.loader = new Loader({
      apiKey: "API_KEY",
      version: "weekly",
      libraries: ["places"],
    });
    //load google maps js API
    this.loader
      .load()
      .then(() => {
        this.displayGoogleMap();
      })
      .catch((error) => { });
  }

 reloadPage() {
    this.loader.deleteScript();
    this.loadGoogleMapsSDK();
  }

Stack trace

Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match.

common.js and utils.js are loaded, but not the rest of js files necessary to display the map. Any help?

[jpoehnelt]

There seem to be a few issues here.

1. reset isn't well defined in the public interface, see Reset/Delete/Clear #100
2. deleteScript should probably be private in favor of the above, deleteScript should be private #208
3. there is a bug in the internal reset that isn't clearing an error, see fix: clear onerror #207 [merged]

[jpoehnelt]

I'm unable to recreate in https://jsfiddle.net/4ejn5s7d/6/. using chrome devtools to initially block requests to maps.googleapis.com and then enable before the setTimeout executes in 10 seconds.

[OscarCR88]

Thank you @jpoehnelt for your prompt response. The only diffence I can spot between your code and mine, is that you're using the same loader whereas in my case, I create a new one when 'reloading'. I did change the code and the result is the same: map is not showing. It does throws an error in the catch block:

Event {isTrusted: true, type: "error", target: script#__googleMapsScriptId, currentTarget: null, eventPhase: 0, …}
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: (5) [script#__googleMapsScriptId, head, html.plt-android.plt-mobile.plt-mobileweb.md.hydrated, document, Window]
returnValue: true
srcElement: script#__googleMapsScriptId
target: script#__googleMapsScriptId
timeStamp: 18523.39000001666
type: "error"
__proto__: Event

Unfortunately the error doesn't say much to me...

[jpoehnelt]

It uses a singleton pattern internally. This, https://jsfiddle.net/kxyfdp6b/1/, calls the constructor twice with the same options.

Try upgrading to 1.11.3 if you can. That release includes #207 which seems to match the error you are hitting.

[OscarCR88]

Yay! 1.11.3 does fix mi issue! Thank you very much @jpoehnelt !