Bootstrap3(Honoka) + Google Map APIでMapが正常に表示されない問題について
今巷で話題のBootstrap(Honoka)を使ってGoogle Map APIのMapを生成しようとしたらMapが表示されない問題にブチ当たった．
環境
Bootstrap3(Honoka)
Google maps javascript API v3
起こったこと
以下のファイルで実験
たとえば，Google Map APIをBootstrap上で呼び出すために以下のHTMLのファイルとJavascriptを用意する．
HTMLファイルは，純粋にBootstrapとfontawesome，jQueryを呼び出す．
加えて，GoogleMapAPIを使用するためのjavascriptも
gist.github.com
jQuery(javascript)もGistに公開．
gist.github.com
ゴリゴリ書いたので汚いので簡単に説明すると，Geolocation APIを用いて，現在位置を取得し，現在位置を基にMapを生成するプログラムです．
initializeGoogleMapAPI()内で実際にMapを生成しています．
生成位置は，htmlファイル内の
内で生成しています．
実験結果
Mapが生成されない!
正確には，Mapを生成する関数に正常に入っている事が確認できたので，入っているにも関わらず画面内に正しく表示されていないということがわかりました．
Bootstrapを適用しない場合はこんな感じ．
ここで，Bootstrapを適用すると…
正しく表示されません．
解決方法
map_canvasの表示ピクセル数が，横697px x 縦0px になっていますね．
Honoka(に限らず，おそらくBootstrapのテーマ)では親要素にheightの大きさに関する記述が明示されていないのが問題なのだと思います．
従って，htmlファイル内のstyleを
<div id="map_canvas" style="width:50%; height:500px">
のようにして，実際にピクセル数を指定すると，正常に出力がされました．
もしくは，htmlタグ，bodyタグに，直接
html,body { height: 100%; }
などして指定すると上手くいくと思います．
bootstrapではデフォルトで縦の長さに関するcssがあたってないため，n%のような可変表示を行おうとすると0pxになってしまうようです．
