Not able to place google maps covering the page

Question

I am a complete newbie to html and css and I am creating a game where I want to use a couple of grids/columns to display a place and timer and the rest of the page to be filled with Map. I dont know how to acheive it. If I try the pixels it doesnt occupy the entire screen and I am sure it would be a problem if it was to be done in mobile

Here is my code

  <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>

score 2 · Accepted Answer · answered Jul 06 '17 at 10:50

Here is a working solution of what you are trying to achieve: 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;
}

more info here :

Not able to place google maps covering the page

1 Answers1