Google Map拖动在iframe中不起作用

Question

我正在尝试在页面上渲染地图，将其缩放以适合用户窗口。 缩放问题是点击事件的坐标错误。 该解决方案解决了以下问题： https://stackoverflow.com/a/40725524

但是现在拖动停止了。 有一个简单的解决办法吗？还是有更好的方法来处理缩放容器中的地图？

显示问题的小提琴： https://jsfiddle.net/vdjeLouc/

<iframe id=iframe src="" width="640" height="480"></iframe>

const iframe = document.getElementById('iframe');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<div id="map" style="width: 100%; height: 100%"></div>');
iframe.contentWindow.document.close();

const mapContainer = iframe.contentWindow.document.querySelector('#map');
const map = new google.maps.Map(mapContainer, {
  center: {lat: 50, lng: 10},
  zoom: 5
});