Google Map に Bootstrap を適用する

見映えの問題で、標記のことについて実施しているところですが
問題が発生しました。
例えば

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GoogleMap Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- GoogleMaps API -->
<script src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
  #map_canvas { height: 100% }
</style>
<script>
$(function(){
  var latlng = new google.maps.LatLng(35.66, 139.69);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($('#map_canvas').get(0), options);
});
</script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div id="map_canvas"></div>
    </div>
  </div>
</body>
</html>

は、正しくMapが表示されます。
このソースの先頭に

<!DOCTYPE html>

を追加すると、途端に表示されなくなります。
色々調べて行くと、原因は行の高さにあるらしい。

<style>
  #map_canvas { height: 500px }
</style>

のように、明示的に高さを指定すると確かに表示されるようになります。
でも、これじゃBootstrapを使用する意味がないではないか!
と言うことで、再び「%」に戻すため「height %」でググり、cssの勉強し直し。
“height 100%” が有効になるためには、親要素全てが “height 100%” で
なけれならないとのこと。されば、

<style>
  html,body,body > div,body > div > div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

としたところ、見事表示されました。
先ずは、目出度し目出度しと言いたいところだが
Bootstrapを使用すると、どうしてもコンテナの階層が深くなるので
これを適用するのが良いのか悪いのか?
悩ましい問題ではあります。

なお、指定をもっと簡単にしようと

<style>
  html,body,body div { height: 100%; }
  #map_canvas { height: 100%;}
</style>

等とすると、map_canvas 内に設定された要素(Google Map)にまで
影響が出るので、丁寧に map_canvas の親要素のみを指定する必要
があります。