javascript - Google App Maker 中的嵌入式 map 无法在 Chrome 浏览器中呈现

Question

在 Google 应用制作工具中，我有一个带有以下标记的 HTML 小部件:

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

我在 div 中创建 map ，如下所示:

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

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

有人遇到过这种情况吗？

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

斯科特

Answer 1

我能够使用 HTML 小部件的此标记使其在 Chrome 中工作:

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

注释:

1. 我已为 HTML 小部件启用“allowUnsafeHTML”选项。
2. 为了初始化 map API(google.maps.Map)，我刚刚将应用制作工具 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}
          });