How to style google maps cloud-based with terrain maptype?

Question

What I'm trying to do is to switch to cloud-based styling from the local one. And here I'm facing an issue with styling over terrain map type. It used to look like this (and it worked):

<GoogleMap
                key="GoogleMap"
                mapContainerStyle={mapConfig.containerStyle}
                zoom={mapConfig.zoom}
                center={mapConfig.center}
                options={{
                    styles: options,
                    disableDefaultUI: true,
                    fullscreenControl: true,
                    mapTypeId: 'terrain',
                }}
                onClick={closeActiveTooltip}
            >

Now I've moved style to API, and it look like this (not working - terrain is covering the styles, replacing them by it's default):

        <GoogleMap
                key="GoogleMap"
                mapContainerStyle={mapConfig.containerStyle}
                zoom={mapConfig.zoom}
                center={mapConfig.center}
                options={{
                    // styles: options,
                    // disableDefaultUI: true,
                    // fullscreenControl: true,
                    mapId: ['{myId}', 'terrain'],
                    // mapTypeId: 'terrain',
                }}

                onClick={closeActiveTooltip}
            >

Does anybody know, if it's possible to make it work?

Answer 1

It seems that you will be using cloud-base styling of Maps JavaScript API and would like to implement it in terrain map types. This is currently an intended behavior of the API because cloud-based map styling seems to be not working on map types like terrain and hybrid as posted in the Public Issue Tracker. It also states that this issue is not applicable when using JSON styling(like the first one you are using). You can star the issue on the link to get notifications and updates.