I have a WordPress site running the Divi theme. I have a map embedded in an iframe with a zoom level set to 2.

<iframe id="map_frame" height="550"></iframe>

<script type="text/javascript">
$("#map_frame").attr("src", "https://www.google.com/maps/d/embed?mid=1Sdu3m4-YMx_Kc0gWshTNQQgSFys&z=2");
</script>

However, something seems to be resetting the zoom level after the map is loaded. In Firefox or Chrome, if the map loads off screen, after I scroll down to the map, the zoom level will reset to 1. If I scroll to the map and reload the page so that the map loads immediately on page load, the zoom level is set correctly. In Safari, the zoom will reset to 1 regardless of whether it loads off screen or not.

Even stranger, the width of the page also seems to affect whether or not the zoom level resets. If the window is resized to less than 1300px (or thereabouts), it will not reset the zoom level. But on a wider window, the zoom resets.

I thought this might be because Divi or some other plugin was lazy loading or asynchronously loading the JS. However, I tried disabling any plugins that might be doing this, but the behavior remained.