Javascript 谷歌地图拖动在iframe中不起作用

我试图在一个页面上呈现一张地图，该页面将被缩放以适合用户窗口。 缩放的问题是单击事件的坐标错误。 此解决方案修复了以下问题：

但现在拖动停止了工作。 有没有简单的解决办法？或者有没有更好的方法来处理缩放容器中的地图

显示问题的小提琴：

const iframe=document.getElementById（'iframe'）；
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（“”）；
iframe.contentWindow.document.close（）；
常量mapContainer=iframe.contentWindow.document.querySelector（“#map”）；
const map=new google.maps.map（mapContainer{
中心：{lat:50，lng:10}，
缩放：5
});

为什么要使用iframe？因为这是我发现的唯一一个在缩放div时为单击事件提供正确坐标的解决方案。为什么要缩放它+您的代码没有反映出您正在使用CSS缩放变换。

<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
});