This repository was archived by the owner on Apr 19, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 19, 2026. It is now read-only.
New zoom helping overlay doesn't render properly #399
Description
Activity
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%)'); }Reacted by Jonathan AdelineThx @ThomasOrlita. Works great.
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