我正在尝试在bootstrap上实现谷歌地图。
我跟随谷歌自己的指南，在这里：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/
有没有人遇到过这个？我必须错过一个基本的解决方法，但没有多少论坛搜索有帮助。
谢谢
这似乎不是Bootstrap问题。对于小提琴你需要使用document.ready和外部资源“http://maps.googleapis.com/maps/api/js?v=3&sensor=false&extension=.js”
此外，你的小提琴中没有参考引导程序。这是一个使用Google地图和Bootstrap的演示...
你可以在JavaScript中看到jQuery document.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 );
});