Image inside the buttons are being rendered three times

[dakotaJang]

The following buttons are not being rendered properly where the image inside the button are rendered three times.

• zoom in button
• zoom out button
• full screen button
• compass needle

They are broken in all versions after v2.0.0 to version v2.0.5 (latest version at this time).

See image below at the bottom right corner of the map as an example.

[JaimeFerBec]

Same here.
@dakotaJang Have you found any temporary solution?
Because I can only think of either solving the issue on my own fork of the project, or downgrading to v1.2.0, where it's not happening. But I'm guessing downgrading will mean dealing with other issues already resolved.

[JaimeFerBec]

I have taken a look at the google-map component code, but I haven't been able to easily figure out what is making those 3 images appear.
I don't have the time to look into it deeply, so for the time being I am using this horribly ugly solution:

const mapDiv = this.$.map.root.querySelector('#map');
const controls = mapDiv.querySelectorAll('.gm-control-active');
controls.forEach(c => {
 while(c.children.length > 1) {
 c.removeChild(c.children[1]);
 };
});

Note that this denotes my own component, where I am using a <google-map id='map' ...>. Thus the this.$.map to retrieve the component, and then .root to access its Shadow-DOM.

[dakotaJang]

The problem seems to have appeared when the google maps api has been updated from version 3.34 to 3.35.

Styles for Pegman view fails from version 3.33.
The icons are bit smaller in version 3.33 and should not be used as it will be the first one to be unavailable later on.

The icon sizes are better in version 3.34 so you can use this as a temporary solution.

The styles starts to fail from version 3.35, the current latest version.

You can use the version attribute to apply the previous version of the google map api as a temporary solution instead of using default version="3.exp".

<google-map version="3.34">

Here is the link for google maps api version documentation.
https://developers.google.com/maps/documentation/javascript/versions

[masonlouchart]

The ".gm-control-active" style classes injected into the document head by Google Maps are not applied properly. I think those styles should be inside the google-map tag (Shadow DOM does not allow overwriting) to be applied.

[HenriqueLimas]

Created an issue on Google Maps for that case since I am having the same problem in my own web component (not google-map). Issue link

Maybe this issue could also be closed since is not on google-map side.

[hellokatili]

This bug ist fixed for API version 3.35 with one of the latest Quartlery Updates: https://developers.google.com/maps/documentation/javascript/versions#quarterly-updates

[dakotaJang]

As mentioned @hellokatili this issue is no longer persists.
[Fixed] Map button styles broken when in shadow root