Menu
I have a Google maps API component in a component's Shadow DOM that has recently started displaying like this:
The fullscreen, zoom in + and zoom out - are each displayed 3 times in their respective buttons.
My init code looks something like this:
new google.maps.Map(mapElement, {
keyboardShortcuts: false, // MUST be off, thanks to https://issuetracker.google.com/issues/73644075 breaking all key inputs across Shadow DOM
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }] // Hide POI so our markers are more obvious
});
However, if I enable streetViewControl or mapTypeControl they don't display three times, it's only the fullscreen and zoom controls.
Here is the issue extant (needs a browser that supports Shadow DOM): https://jsfiddle.net/KeithHenry/6yfmehLr/
Why are the additional images appearing?
How do I fix or work around this issue?
988
I have a hack that works around this, for now.
Add the following styles to the shadow root:
.gm-control-active > img {
box-sizing: content-box;
display: none;
left: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
.gm-control-active > img:nth-child(1) {
display:block;
}
.gm-control-active:hover > img:nth-child(1),
.gm-control-active:active > img:nth-child(1) {
display:none;
}
.gm-control-active:hover > img:nth-child(2),
.gm-control-active:active > img:nth-child(3) {
display:block;
}
These are added by the Maps API to the <head>, but these don't cascade through any Shadow DOM. This is a bug in the API: https://issuetracker.google.com/issues/122064478
As this is a bug in the API this question is resolved. Please star the linked issue if you have the same problem.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With