Okay, completely reset everything to the original code and created a child theme so everything should be good to go now.
I test first the initial problem, that when the php command calling the map shortcode is within the div that has class=”custom-header-media” it displays pixelated and glitched.
That problem persisted, until I remove the class=”custom-header-media” from the div that wraps around the map. At this link you can see how the map displays perfectly fine without this class. If you navigate to any other page such as about, the map still takes up the full screen and the title text + nav bar, rather than displaying on-top of the map as it should, is pushed down below the map.
https://www.smilesaidtheriver.com/IN_VISIBLE/2/