Javascript 谷歌地图未正确填充div

我有一个谷歌地图，它应该能得到用户的位置，以他们的位置为中心，然后在地图上提供一个固定点的方向

问题在于，地图没有填充整个

div

，也没有居中或缩放到正确的位置，但它正在加载用户位置并给出正确的方向。如果我在JSFIDLE中重新创建它，尽管它工作得很好，但是当包含在我的站点中时，就会出现所描述的问题

jsFiddle：

当它包含在我的站点中时的外观。

是什么导致了这个问题？（如果你想把我的代码贴在这里，而不必去胡闹，请告诉我）

---

编辑：dev控制台中也没有出现错误。我也尝试过使用

preserveViewport:true

，但没有效果。

您的谷歌地图初始化应该在函数中，如果没有，请确保它是。然后，您只能在切换地图后初始化它，这也将确保如果用户不希望看到它，它不会被加载

function init_maps(){

    // google maps api goes here

}

var init = false;

$('.contact_us').click(){

    if(!init){

        init_maps();
        init = true;
    }

    $('.contact_us').slideToggle();

}

---

试试：google.maps.event.trigger（映射，'resize'）；我试着将其添加到点击链接加载页面的位置，但这只会使地图大小调整到div的3/4左右，并且仍然没有居中或缩放到正确的位置。我把它放错地方了吗？或者应该这样做吗？这是只在IE上发生的还是你也在其他浏览器上测试过它？它发生在Chrome、Firefox和IE上。在FF和Chrome的最新版本中对我很好。我把地图代码放在了

init_maps（）中

函数，但我认为我没有正确调用它，请参见下面的

$（“#Contact”）.on（“单击”，函数（事件）{$（“#divs”）.removeClass（'activeTab'）；$（this）.addClass（'activeTab'）；$（“#ContactContent”）.show（）；$（“#divs”）.hide（）；if（！init）{init init maps（）；init=true；}$（'mapContainer'））.slideToggle（）；}）