Dynamic Api Keys

[guilleCM]

Hello,

I'm using an app with multiple domains, and I would like to switch between different apiKeys depending on which domain is being used to access the app. However, once I instantiate the component with a particular apiKey, if I then access the app via another domain, I encounter the following error: "Error: Loader must not be called again with different options."

I've tried instantiating it in different components and even in separate routes within the same application to ensure different Loaders are created, but I still encounter the same error.

My question is: once a Loader is instantiated with an apiKey, is it possible to dynamically change it? Or is there any recommended approach to handle multiple apiKeys?

Thank you in advance for your help!

[usefulthink]

In short, you can't have multiple API keys in the same global scope.

The API key will become part of the URL for the script that loads the Maps JavaScript API. Once that is loaded, it is no longer possible to "unload" it (for example, to replace the API key with something else). This is why the loader will report an error if you try to create a new instance with a different API key.

[guilleCM]

Thank you for your reply! So I understand that it is a limitation of the Google Maps JavaScript API and not of this library itself.

[usefulthink]

Pretty much that, yes.

[HaNdTriX]

@guilleCM I just created an experimental Google Maps API loader, that isolates the entire SDK via iframe. This allows us to reinstantiate the entire SDK or have multiple different Google Maps SDKs in the same page context.

The API of the experimental loader is almost the same except that it supports the AbortController pattern and multiple instances of the SDK.

Check out #210 (comment) for more infos.