Google地图不会在Bootstrap上显示?

时间:2013-05-30 19:18:28

标签: javascript google-maps css3 twitter-bootstrap

我正在尝试在bootstrap上实现谷歌地图。

我已按照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(over bootstrap)

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

请参阅此处了解jsFiddle:http://jsfiddle.net/robmc/6BTjE/2/

之前有没有遇到过这个?我必须错过一个基本的解决方法,但没有多少论坛搜索有帮助。

由于

3 个答案:

答案 0 :(得分:4)

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

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

答案 1 :(得分:3)

这似乎不是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
});

答案 2 :(得分:1)

//我这样做了,它对我有用

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

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