[Feat] Rendering multiple maps in different locations on the same page about react-google-maps

[usefulthink]

I just made a new release 0.8.3 which should in theory solve the problem you've been seeing.
At least I did find and fix a bug in our API loader that would explain the status of the second APIProvider not getting updated.

There might be other issues with your setup (nobody thought of having multiple react-roots in the same page), but please let me know once you tested it.

[LouayJebran]

The Problem seems to be that any APIProviders added after the initial one gets stuck in the Loading state

The first one is loaded and works fine

second one stuck during loading

[usefulthink]

I'm not familiar with ASP.NET, am I reading this correctly that you have mutiple React render-roots in the same page? Or is that one application that gets hydrated from the entire html?

In general, there should only be a single APIProvider in the application. The way this is supposed to be handled is by having all the providers at a very high level in the applications component tree (all our examples may be a bit misleading here since they are too small to make this separation).

The problem with having multiple providers is this: there can only ever be a single instance of the maps api loaded on the page, and that is associated with parameters such as the API-key, region and language settings and other details and there can't be multiple instances of the maps API within the same page (so something like two maps in different languages are not possible).

When we allow multiple API-providers, which one gets to decide on the values to use for loading the API?

That being said, I still think there's a subtle bug in there: The way it's supposed to work in your case is that the first APIProvider being rendered will trigger loading the maps API and any other APIProvider should be able to detect the API already been loaded (there is some logic in place that our api-loader will not try to load the maps API if it has already been loaded by other means). I'll have a look if there's something wrong with that code.

[LouayJebran]

hi @usefulthink
yes you got this right, we have multiple React render-roots in the same page.
thanks for taking the time to check if it's a bug.

not sure if this could help in any way
tinkering with the react dev tools and setting the state of GoogleMapsApiLoader to "LOADED" like the first instance of the APIProvider seem to load the second map

[LouayJebran]

@usefulthink
Just tested it, and it seems to be working great.
thanks again and I will keep an eye for any problem that may arise in our setup.

[usefulthink]

Awesome, thanks for letting me know!