google-maps web 组件显示空白答案

【问题标题】：google-maps web component display blankgoogle-maps web 组件显示空白
【发布时间】：2016-08-30 04:10:10
【问题描述】：

我在 Polymer 中使用了 google-maps 网络组件并按照示例进行操作：

<google-map latitude="7.1907"
                longitude="125.4553"
                api-key="{{apiKey}}"
                on-google-map-ready="mapReady"></google-map>

搭配风格：

google-map {
  width: 100%;
  height: 200px;
  display: block;
}

但它显示如下：

我尝试使用响应能力，每次屏幕更改地图加载时，有什么想法或解决方案吗？谢谢

【问题讨论】：

任何控制台输出？我不知道那个组件，但确定这是正确的api-key="{{apiKey}}" 吗？
是的，只是从谷歌控制台复制的。
棘手的事情是@elsololobo 上没有控制台或任何错误
好吧，我尝试了 on-google-map-ready 事件，它记录了“地图就绪”，并在控制台上显示了消息。但仍然是灰屏图片。
尝试在 google-map 组件上调用 resize。当视图被隐藏然后显示时，地图对我来说显示为空白，因此我在动画之后显式调用 resize 以显示地图。

标签： google-maps google-maps-api-3 polymer-1.0 google-web-component

【解决方案1】：

现在得到了解决方案。我使用了google-map组件resize()的方法，根据documentation：

显式调整地图大小，更新其中心。 如果地图在您取消隐藏后没有显示，这很有用。

我从不隐藏地图，但我使用了 Iron-pages（所以它确实隐藏了地图）并且第一次调用了 map-ready 函数，但是放置地图的页面当前隐藏在当前点（这就是为什么它不会显示任何东西）。所以我尝试在铁页显示地图所在的页面后刷新地图。

【讨论】：