Google Maps Visual Flashing During Loading

Hi birbs,

I was unhappy with the loading behavior of Google Maps that comes with Perch out of the box. There's a very noticeable, unpleasant flash when the static map fallback <img> is displayed, then hidden before the dynamic JavaScript API map loads. I sought out a fix for that, and I've come up with something that kinda works (for me) right now.

Compare

Before: https://i.imgur.com/gnBT5Gj.mp4
After: https://i.imgur.com/g9FjIwT.mp4

Now the interactive map loads on top of the static map and is shown only once all the map tiles have loaded.

To do that I modified the perch/core/assets/js/public_maps.js file like so (changes are highlighted in the gutter):

The parts that I added (as text):

// this comes after mapdiv.setAttribute(…);
mapdiv.style.opacity = 0.1; // force map tiles to load
mapdiv.style.position = 'absolute'; // remove from flow

…

// this comes after marker = new google.maps.Marker({ … });
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    mapdiv.style.opacity = 1;
    mapdiv.style.position = 'relative';
    img.parentNode.removeChild(img); // this line was moved here
});

Originally I thought of making the static map a background image of the mapdiv (better for responsive layout), but I didn't see an easy way to do that (it might also be less accessible/correct that way).

My question, as a newbirb, is…

Is there a better way to make this change so that it survives Perch updates? Or is this the only way?