Google App Maker 中的嵌入式地图无法在 Chrome 浏览器中呈现

Question

在Google App Maker中，我有一个带有以下标签的HTML小部件：

<div id='map'></div>

我在div 中创建地图是这样的：

map = new google.maps.Map(document.getElementById('map'), 
{
zoom: 11,
center: {lat: 41.879, lng: -87.624}
});

这在Firefox和IE中工作正常，但在Chrome中，地图就是不显示。 没有错误，只是一个空的小部件。 顺便说一句，我可以在 Chrome 中很好地显示实际的地图小部件，但我需要它在 HTML 小部件中。

有人遇到过这种情况吗？

感谢您的任何提示或指示。

斯科特

Answer 1

我能够使用它在 HTML 小部件的以下标记在 Chrome 中工作：

<div id='map' style='width: 100%; height: 100%'></div>

笔记：

1. 我已经为 HTML 小部件启用了"允许不安全的 HTML"选项。
2. 要初始化地图API(google.maps.Map(，我刚刚将App Maker Map小部件放在页面上。
3. 我在页面上按钮的 onClick 处理程序中调用了原始代码片段。

// onClick handler of some button on a page
var map = new google.maps.Map(document.getElementById('map'), 
{
zoom: 11,
center: {lat: 41.879, lng: -87.624}
});

Answer 2

事实证明，当HTML小部件是固定大小时，这工作正常。 当小部件设置为"填充父级"时，它不会呈现(但仅在 Chrome 中呈现(。

所以这是AppMaker或Chrome中的一个错误，可能是前者。