无法放置覆盖页面的谷歌地图

【问题标题】：Not able to place google maps covering the page无法放置覆盖页面的谷歌地图
【发布时间】：2017-12-09 18:02:22
【问题描述】：

我是 html 和 css 的完全新手，我正在创建一个游戏，我想在其中使用几个网格/列来显示位置和计时器以及要填充地图的页面的其余部分。我不知道如何实现它。如果我尝试像素它不会占据整个屏幕，如果要在移动设备上完成，我相信这将是一个问题

这是我的代码

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3" style="background-color:orange;">
      {{ countDownTimer }}
      </div>
      <div class="col-sm-9" style="background-color:pink;">
        {{ puzzle.name}} , {{ puzzle.country }}
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12" id="map" style="width:100%; height:100%;"></div>
    </div>
  </div>

【问题讨论】：

标签： html twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

这是您要实现的目标的有效解决方案：http://jsfiddle.net/4mtyu/2758/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3" style="background-color:orange;">
      {{ countDownTimer }}
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      {{ puzzle.name}} , {{ puzzle.country }}
    </div>
  </div>
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div"></div>

CSS：

html,
body,
#map_div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_div {
  position: relative;
}

h1,
p {
  margin: 0;
  padding: 0;
}

更多信息在这里：

【讨论】：

太棒了。非常感谢约翰