0

I need your support for a particular question. I developed a custom map with google MyMaps and I inserted the related code on my site. Unfortunately the map shows a sort of black band at the top, which I don't like and which I managed to eliminate by working on the size of the map, scrolling it up and using the "overflow: hidden" function.

The problem that occurs is that when you click on the icon that marks my location, a panel opens which is obviously cut off, due to the settings I had to give so as not to show the black band.

So I checked using Chrome's "inspect" function that this panel is marked with the "#featurecardPanel" div. Therefore I tried to add a padding-top fictitiously using the "inspect" function of google and everything seems to work correctly.

The problem is that I can't apply this css. Since the DIV in question is not on my site but is produced by google.

I tried to style it via Javascript, with this code:

document.querySelector('#featurecardPanel').style.paddingTop = '66px';

Unfortunately it doesn't work and no padding-top is attributed to that div. Can you think of any solution?

Thank you!

user2556011
  • 1

1 Answers1

0

try this

const iframe = document.querySelector('iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const style = iframeDoc.createElement('style');
style.textContent = '#featurecardPanel { padding-top: 66px !important; }';
iframeDoc.head.appendChild(style);
Cid-Wings
  • 449
  • 1
  • 6
  • 13