Bootstrap 2 から Bootstrap 3 に移行したばかりです。Bootstrap で Google マップを表示するのは難しいことを知っており、Bootstrap 2 で動作させるのに時間がかかりましたが、今また迷子になっています。
このトピックに関する関連する質問があります。たとえば、次のリンクを参照してください。ただし、答えが大きく異なるため、問題が多層に見えることがわかります。
Twitter Bootstrap で作成されたモーダルで Google マップを表示する
Bootstrap 3.0 と Google マップの JavaScript API V3 スタイル
私のコードはかなり標準的だと思います：
<nav class="navbar navbar-default navbar-fixed-bottom visible-xs" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#lowerNavBar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse visible-xs" id="lowerNavBar">
<ul class="nav navC navbar-nav">
<li id ="listTab" class="active"><a href="#listTabContent" data-toggle="tab">List</a></li>
<li id ="mapTab"><a href="#mapTabContent" data-toggle="tab">Map</a></li>
</ul>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane active" id="listTabContent">
<div class="container" id="postsGoHere">
</div>
</div>
<div class="tab-pane" id="mapTabContent">
<div id="mapCanvas" class="google-map-canvas"></div>
</div>
</div>
ですから、私の質問は次のとおりです。マップが正しく表示されるポイントに到達するには、正確に何をしなければならないのでしょうか? 上記の両方のソリューションを断熱材と一緒に試しましたが、利用できませんでした. 現在、画面の左上部分に部分的な地図が表示された「灰色のボックス」の結果が表示されています。