Javascript 谷歌地图是灰色的

我在移动应用程序中使用谷歌地图，使用html和javascript。当我加载地图时，我只能在左上角看到地图的5%。95%的div容器为灰色。 当我想用Firebug检查div时，整个地图突然被加载。 那会是什么？ 我已经尝试了几个Stackoverflow线程，但没有一个解决方案适合我。 多谢各位

代码：

---

当我使用以%或em度量的div属性时，它根本不起作用。

尝试在document ready上调用resize方法：

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});

---

检查地图选项的中心或其他属性是否正确。在我的情况下，谷歌地图无法解释中心的财产；虽然这个页面在css和jsp方面完全没有错误，但它始终只显示灰色的地图

对于我的情况，只需调用

map.refresh（）

即可解决此问题。我正在使用GMAP。

这发生在我身上，因为mapTypeId为空

尝试：

---

在我的例子中，我没有提供来自外部API的经度。一旦API修复为包含经度，问题就解决了

我用
我只能通过使用

setTimeout

和

setZoom

来刷新/重新创建地图（即使级别相同）

刷新最吸引人的地方在于，它会在地图第二次显示时移动地图。

---

谷歌地图显然不是这样。

在我的例子中，我的地图没有加载，因为我没有设置

zoom

选项

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10, // Forgot to set this prop
       center: new google.maps.LatLng(-33.92, 151.25)                               
});

---

需要查看代码。。。或者更好的是沙盒版本。听起来像是在容器元素大小正确之前初始化了映射

google.maps.event.trigger（map'resize'）

其中

map

是您的映射。您是否为保存映射的div容器指定了大小，如果是，您使用了哪个实体，px，em，%？我必须使用px属性，因为em和%根本不起作用。google.maps.event.trigger（map'resize'）；至少在Firefoxconsole中有效，但目前为止在我的代码中不起作用。当我键入google.maps.event.trigger（映射“resize”时，您确定它是$（document.ready（function（））吗；在firefox控制台中，它实际上可以工作。这是使用jQuery加载页面后运行代码的一种方法。它将在加载所有css和脚本文件后运行，但如果您有其他JS更改页面布局，则仍然为时过早，您需要在更改布局后调用resize。我基本上使用了这个r现在：$（'#click test'）。单击（function（）{google.maps.event.trigger（map，'resize'）；}）；它现在可以工作了，但我不知道这是否只是运气。“map.refresh（）不是一个应该是的函数，假设您将变量命名为“map”就像OP一样。谷歌地图文档中没有引用它，所以它一定是一个较旧的API版本。你是如何修复它的？太棒了！！！刚到这里：意识到我把它们放错了顺序：D

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});

map.setMapTypeId("roadmap");

// set timeout.
setTimeout(() => {
    console.log("attempting refresh");
    google.maps.event.trigger(this.map, "resize");
    this.map.setZoom(8);
},
100);

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10, // Forgot to set this prop
       center: new google.maps.LatLng(-33.92, 151.25)                               
});