New zoom helping overlay doesn't render properly

[Jonathan Adeline]

Since the last release of the Google Maps API, a new (useful) overlay has appeared to indicate that user have to press CMD and use the mouse wheel to zoom the map.

It should render like this (sorry it's in french) :

But when using the google-mapelement, we've got this :

Just the text shows-up in a basic font and behind controls button.

Here is a jsbin to reproduce if needed :
https://jsbin.com/qiboluq/edit?html,console,output

[Thomas Orlita]

Workaround to make it work:

<google-map on-google-map-idle="mapIdle">

mapIdle(event) {
    event.target.shadowRoot.querySelector('.gm-style-pbc').setAttribute('style', 'z-index: 2;position:absolute;height:100%;width:100%;padding:0px;border-width:0px;margin:0px;left:0px;top:0px;opacity:0;transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center');
    event.target.shadowRoot.querySelector('.gm-style-pbt').setAttribute('style', 'font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)');
}

[Jonathan Adeline]

Thx @ThomasOrlita. Works great.