谷歌地图不显示在 Bootstrap 上？答案

【问题标题】：Google Maps does not display on Bootstrap?谷歌地图不显示在 Bootstrap 上？
【发布时间】：2013-05-26 12:03:12
【问题描述】：

我正在尝试在引导程序上实现谷歌地图。

我遵循了 Google 自己的指南，这里：https://developers.google.com/maps/documentation/javascript/examples/map-simple

虽然这适用于独立页面，但当我添加 Bootstrap CSS 时，地图不会显示。我似乎找不到修复它的黑客。

HTML：

  <body>
    <div id="map-canvas"></div>
  </body>

脚本：

var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

CSS（通过引导）

  html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }

在这里查看 jsFiddle：http://jsfiddle.net/robmc/6BTjE/2/

有没有人遇到过这种情况？我一定错过了一个基本的解决方法，但论坛搜索没有任何帮助。

谢谢

【问题讨论】：

Uncaught ReferenceError: google is not defined
并且还需要设置地图画布宽度。

标签： javascript google-maps css twitter-bootstrap

【解决方案1】：

我已通过将高度更改为 px 来解决此问题。希望对你有帮助

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

【讨论】：

【解决方案2】：

这似乎不是 Bootstrap 问题。对于小提琴，您需要使用document.ready，以及外部资源“http://maps.googleapis.com/maps/api/js?v=3&sensor=false&extension=.js”

http://jsfiddle.net/6BTjE/8/

此外，您的小提琴中没有参考引导程序。这是一个带有 Google 地图和 Bootstrap 的演示......

Bootstrap + Google Maps

你可以在 JavaScript 中看到 jQuery document.ready...

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

【讨论】：

谢谢，我了解外部资源的变化；你能解释一下我将如何在我的 HTML 标记中实现 document.ready，还是我需要编辑 jquery.js？
好的，谢谢，我一定还是遗漏了一些东西。当我更新外部资源并将代码复制并粘贴到干净的 HTML 文件中时，它仍然无法正常工作。是否加载了我看不到的其他内容？
您的 HTML 文件是否包含 jquery？

【解决方案3】：

//我做了这个，它对我有用

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

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

【讨论】：