仅当我调整浏览器窗口大小时才会加载 Google 地图答案

【问题标题】：Google map loads only if I resize the browser window仅当我调整浏览器窗口大小时才会加载 Google 地图
【发布时间】：2018-02-06 13:10:08
【问题描述】：

我正在研究谷歌地图的实现，到目前为止它运行良好。为了尝试并玩弄它，我为此制作了一个额外的文件。

您可以在这里查看地图：Google maps file

我已经在该文件中准备好了所有内容，我想在我的网站上实现它。我把代码复制到我的“主文件”中。

现在，只有当我调整浏览器大小或在文本字段中写入内容时，谷歌地图才会首先加载。

浏览器没有返回任何错误。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap&language=de">

此代码示例位于我的 <body>-tag 的末尾。我知道 google-map 需要异步加载，但我不确定它是什么，因为 - 我是初学者...

谁能给我一个提示，为什么地图会这样？

所有需要的 javascript 文件都已实现。

【问题讨论】：

您需要在您的问题中发布一个完整但最小的问题标记或代码示例：minimal reproducible example
在此处添加您的代码
代码长 700 行。如果浏览器没有返回任何错误，我应该发布什么？你想要完整的文件吗？
问题是，一切正常。只有浏览器需要“重新注入”？ - 因为如果我调整窗口大小，就会出现谷歌地图。这是一个“同步”问题吗？

标签： javascript google-maps

【解决方案1】：

Google 地图似乎在没有调整窗口大小的情况下显示。

如果未显示，请尝试在地图加载时添加“调整大小”事件触发器。窗口大小调整也是同一个事件。

function initMap() {
    var map = new google.maps.Map(document.getElementById('newjobmap'), options);
    google.maps.event.trigger(map, "resize");
}

【讨论】：

您好 Thu Sama，感谢您的回答。可惜没用。
即使我给 div 一个固定的高度和宽度，地图也不会加载。
您的链接fabiansquinobal.com/geo.html 工作正常。而且我无法重现该错误。所以我很难看出问题所在。提供一些屏幕截图或示例“不工作”代码会很有帮助。