Javascript 谷歌地图不显示在引导上？

我正在尝试在bootstrap上实现google地图

我遵循了谷歌自己的指南，如下所示：

虽然这在独立页面上有效，但当我添加引导CSS时，地图不会显示。我似乎找不到修复它的方法

HTML:

CSS（通过引导）

有关JSFIDLE，请参见此处：

以前有人遇到过这种情况吗？我必须错过一个基本的解决办法，但没有多少论坛搜索有帮助

---

谢谢

这似乎不是引导问题。对于小提琴，您需要使用

document.ready

，以及外部资源“”

而且，在你的小提琴中没有参考引导。这里是一个演示与谷歌地图和引导

您可以在JavaScript中看到jQuery

文档.ready

$(document).ready(function() {
 // code here
});

---

我已经通过将高度更改为px解决了这个问题。希望能有帮助

#map-canvas{
    /*height: 100%;*/
    height: 400px;
}

---

//我做到了，这对我很有用

$(document).ready(function(){
    var height=$( document ).height();
    $("#map").css("height", height );
});

$( document ).resize(function() {
    var height=$( document ).height();
    $("#map").css("height", height );
});

---

未捕获引用错误：google未定义，您还需要设置地图画布宽度。谢谢，我理解对外部资源的更改；你能解释一下我将如何在HTML标记中实现document.ready，或者我需要编辑jquery.js吗？好的，谢谢，我肯定还缺少一些东西。当我更新外部资源，并将代码复制粘贴到一个干净的HTML文件中时，它仍然不起作用。是否加载了我看不到的其他内容？您的HTML文件是否包含jquery？

$(document).ready(function() {
 // code here
});

#map-canvas{
    /*height: 100%;*/
    height: 400px;
}

$(document).ready(function(){
    var height=$( document ).height();
    $("#map").css("height", height );
});

$( document ).resize(function() {
    var height=$( document ).height();
    $("#map").css("height", height );
});