Heres the info I found on how to make a responsive iframe that I adapted to Webflow and to embedding a Google MyMaps map.
And here are my steps in Webflow:
Step 1
Added a div element and gave it the class of iframe-wrapper (so I could use it elsewhere) with the following settings:
position: relative
overflow: hidden
padding-top: (a % to give the proportion rectangle you want (50% would produce a 2:1 proportion))
Step 2
Inserted an embed element inside this div. Gave it the class wrapped-iframe with the following settings:
position: absolute (relative to the iframe-wrapper)
top and left: 0 (by setting the absolute location to top left)
width: 100%
height: 100%
Step 3
Get the embed code for the Google MyMap. It’s available to the MyMap author through the 3-dot column dropdown next to the map name. Paste this code into the embed. Add it’s wrapped-item class. Delete the width and height settings in the code and save. So it would take the form of:
<iframe class="wrapped-iframe" src="https://www.google.com/rest-of-iframe-url"> </iframe>
Now the only thing I have left to figure out is how, when scrolling down the page and placing the cursor or finger on top of the map, to prevent the cursor or finger from controlling map scale, and instead have it continue to control page scrolling.