how to make map appear full screen width/height

[abbood]

I included google maps sdk into my project and was able to make it appear 100% screen width/height by doing the following:

first i made sure the html tag was 100% height

html { height: 100% }

in the html file holding the google map, I just made the holding div 100% height/width as well:

#map {
  height: 100%
  width: 100%
}

and I basically load the map using javascript:

$(document).ready(function() {
    var handler;
    handler = Gmaps.build("Google");
    return handler.buildMap({
      internal: {
        id: "map"
      }
    }, function() {
      handler.fitMapToBounds();
    });
  });

with angular-google-maps, i simply followed the instructions.. which specifically asks to set a height for the map like so:

.angular-google-map-container { height: 400px; }

trying to set that to 100% results in nothing showing up in the page. I spent all morning messing with css, with no clear win. The closest I got was doing this

.angular-google-map-container { 
  height: 100%;
  position: absolute;
}

but then that made the map non-draggable..

any ideas?

[cthrax]

I make my map fill its container by having the google-map directive nested in a div and the following CSS.

.div-wrapper {
position:relative;
height: 100%;
width: 100%;
}

.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

[cthrax]

Thusly http://plnkr.co/edit/3puiWPqHzqYEOdHtbro6?p=preview .

[abbood]

nice thanks!

[gitnik]

I'm having the same error and the plunker you provided no longer works. Have there been updates that I should check out?

[gitnik]

I just found out that using 100vh instead of 100% actually works. Seems pretty weird and I'm not sure why this is happening

[cthrax]

Likely because your body is not set to 100%.

[escapedcat]

Also see #309

[weslley39]

@gitnik +1

[nebulr]

This helped a lot in addition I thought I might add what I found worked :
I had a nav bar that had 4em height and a sub nav bar with 64px height

.map-wrapper {
  position: relative;
  height: calc(100vh - 4em - 64px);
}

.angular-google-map-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

with html

  <div class="map-wrapper">
      <ui-gmap-google-map> ...</ui-gmap-google-map>
  </div>