[Map] Google Maps rendering fails when rendering more than 1 map

[SVillette]

Hi,

Thanks for the map package, it's awesome to have it directly in the Symfony ecosystem.

However, I encountered an issue when rendering more than one map. The rendering of the second map (and the following ones) fails with the following JavaScript error:

Uncaught (in promise) TypeError: _google.maps.Map is not a constructor
    at extended.doCreateMap (map_controller.js:161:1)
    at extended.connect (map_controller.js:24:1)
    at extended.connect (map_controller.js:134:1)
    at Context.connect (stimulus.js:1498:1)
    at Module.connectContextForScope (stimulus.js:1668:1)
    at Router.scopeConnected (stimulus.js:2054:1)
    at ScopeObserver.elementMatchedValue (stimulus.js:1961:1)
    at ValueListObserver.tokenMatched (stimulus.js:999:1)
    at TokenListObserver.tokenMatched (stimulus.js:930:1)
    at stimulus.js:924:1

I have no idea how to fix this issue. I have set a different mapId for each map.

Thanks in advance for your help!

[Kocal]

Hi, and thanks for your words :)

I believe this is caused by a race-condition when loading the Google Maps API SDK, from: https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Google/assets/src/map_controller.ts#L67-L98

Let me explain:

1. You refresh your page
2. The 1st map execute connect()
3. The 2nd map execute connect()
4. The 1st map does not see _google and so tries to load the Google Maps API SDK, which is asynchronous
5. The 2nd map does see _google, but it only contains { maps: {} } and not the whole SDK

Which triggers _google.maps.Map is not a constructor()

We should find a way to temporize super.connect() call, when the SDK is already loading from the first map instance.

EDIT: my speculation was correct, opened #2854 to fix it

[SVillette]

Thank you @Kocal for fixing this issue that quickly 😄

[Kocal]

This will be released in 2.27, surely today or this week :)