我在使用Bootstrap 3.0的Togglable标签时尝试使用Google Maps API。
我确保地图的高度以像素为单位强制显示，但地图主要是灰色的。
（我无法显示图片，因为我没有足够的声誉评分）
然后，我通过添加一些应该重新调整地图大小的JS来完成其他一些帖子。如果地图不在可切换标签内，那就解决了问题。
不幸的是，如果我将地图放在可切换的标签中，它会直接返回到不会渲染75％的地图。有没有办法在Bootstrap 3的可切换选项卡中使用谷歌地图API，如果有的话，是否存在 我做错了什么？这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Real Estate Crowd Investing</title>
<meta name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- GOOGLE MAPS -->
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API KEY GOES HERE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 28.563219, lng: -81.350211},
zoom: 20
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListenerOnce(map, 'idle', function(){
$(window).resize();
map.setCenter(yourCoordinates);
});
$(window).resize(function() {
if ($("#map_canvas").children().length > 0){
if (map)
google.maps.event.trigger(map, 'resize');
}});
</script>
<!--/ Google maps-->
</head>
<section class="container">
<!-- content -->
<section class="row">
<br>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active"><a href="#property" role="tab" data-toggle="tab">Property</a></li>
<li role="presentation"><a href="#location" role="tab" data-toggle="tab">Location </a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="property"><?php include "_/components/php/5tab-listings-property.php"; ?></div>
<div role="tabpanel" class="tab-pane" id="location">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="map-canvas" style="width: 500px; height: 500px"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</container>
</section><!-- main -->
</section><!-- container -->
<script src="_/js/min/bootstrap.min.js"></script>
</html>