Advanced Markers and Map Style

[emaborsa]

I am working on an single page application written in React+Typescript. I started using google.maps.Marker, but because it is deprecated I moved to the google.maps.marker.AdvancedMarkerElement, where the pain begins.

Ok, refactor the code using the google.maps.marker.AdvancedMarkerElement:

The map is initialized without a valid Map ID, which will prevent use of Advanced Markers.

In order to display the map correctly, I had to set the following style:

.gmaps {
  width: 100%;
  height: 100%;
  outline: none;
}

First I passed it using the property mapContainerStyle, which leads to:

Google Maps JavaScript API: A Map's preregistered map type may not apply all custom styles when a mapId is present. When a mapId is present, map styles are controlled via the cloud console with roadmap map types. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling

As a workaround I tried to pass it as pure css (class name to the parent and CSS referencing to the child):

.gmaps > *
 {
  width: 100%;
  height: 100%;
  outline: none;
}

How can i set these three css properties to the map without having the warning?

but warning persists. For a test purpose I removed completely the style, but the warning persists. Why is the warning still printed out even if I do not set a style?