How do a remove one of the two copyright notices on Google Maps?

Question

Google maps appears to show "Map data ©2018 Google" twice in maps:

Both notices are identical text and neither can be scrolled out of view, but the one on the left is fixed in the canvas, while the one on the right is a DOM element floating on top of the map.

Why both? And how can I turn one off? Surely a single notice is sufficient?

Please note that I am not trying to remove Google's copyright or hack the content. When I see the Maps API used on other sites there is a single copyright notice, for instance:

Why do they have 1 and I have 2?

Sample code, note repeated copyright...

#wrapper {
  height: 180px;
  width: 100%;
  border: dotted 1px green;
}

<div id=wrapper></div>
<script>
  function initMap() {
    const wrapper = document.getElementById('wrapper');
    const shadow = wrapper.attachShadow({
      mode: 'open'
    });

    const mapDiv = document.createElement('div');
    mapDiv.style.height = '180px';
    mapDiv.style.border = 'dotted 1px red';
    shadow.append(mapDiv);


    const options = {
      center: {
        lat: 51.51,
        lng: -0.08
      },
      zoom: 14,
      keyboardShortcuts: false,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      }]
    };

    const map = new google.maps.Map(mapDiv, options);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 1

Having a look at the DOM of your example I can see that duplicated items have css classes gmnoprint and gmnoscreen respectively. These class names suggest that one should be visible when you see map on the screen and another one when you print a map.

Digging into Google code in https://maps.googleapis.com/maps-api-v3/api/js/33/4/intl/en_gb/controls.js I figured out that Maps JavaScript API handles this situation using the following CSS styles

@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}

As you create a map in the shadow DOM tree, you can fix the issue adding these styles to your shadow root.

I modified your example and added styles to your shadow root. Have a look at the code snippet:

#wrapper {
  height: 180px;
  width: 100%;
  border: dotted 1px green;
}

<div id=wrapper></div>
<script>
  function initMap() {
    const wrapper = document.getElementById('wrapper');
    const shadow = wrapper.attachShadow({
      mode: 'open'
    });
    
    shadow.innerHTML = `<style>@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style>`;

    const mapDiv = document.createElement('div');
    mapDiv.style.height = '180px';
    mapDiv.style.border = 'dotted 1px red';
    shadow.append(mapDiv);


    const options = {
      center: {
        lat: 51.51,
        lng: -0.08
      },
      zoom: 14,
      keyboardShortcuts: false,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      }]
    };

    const map = new google.maps.Map(mapDiv, options);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>

I hope this helps!