When mapId is provided, map component stops rendering map tiles, Uncaught in Promise error

[izelic-beforenine]

Broad explanation of problem

Map is working normally but when I pass mapId prop (custom google cloud map styling) it stops rendering tiles and throws error.

System specifications

os: latest MacOS Ventura

node --version: v19.2.0

react version: 18.2.0

webpack version: 5.75.0

@babel version: 7.18.6

@react-google-maps/api version: 2.18.1

How does it behave?

when I pass mapId it instantly throws error

webgl.js:541 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'indexOf')

and often its followed by

webgl.js:234 Uncaught Error: Not initialized.

Sometimes the map renders completely without issue, but most of the time no tiles are loaded, just markers (in some cases first tile is loaded, when zoomed out no more tiles are loaded.

How should it behave correctly?

It should load map with custom style

[abaytler]

I'm getting the same exact issue. I was looking through versions of react-google-maps-api to see if maybe this was fixed. Seems like no matter how I initialize the mapID through a context, const options and then pass in options into the component, using useJSApiLoader or just putting it inside component inside the render, nothing works to render the cloud based mapID.

Any help from the developers of the package would be much appreciated!