CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Keith
Keith

Reputation: 155792

Google maps API showing fullscreen and zoom icons 3 times in each button

I have a Google maps API component in a component's Shadow DOM that has recently started displaying like this:

broken map

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?

Upvotes: 3

Views: 1610

Answers (3)

user3709875
user3709875

Reputation: 69

You can also revert to an older version (3.35) to workaround for now.

Upvotes: 0

user3197506
user3197506

Reputation: 197

I just use :

#map img:not(:first-of-type){display: none}

(where #map is the id of the map container).

Prettier, and it looks to make everything clear.

Upvotes: 0

Keith
Keith

Reputation: 155792

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.

Upvotes: 3

Related Questions