Set Google Maps Container Div Width and Height 100%

Set Google Maps Container DIV width and height 100%

You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}

Width and height of the Google map

If the div map is inside other div (eg: container) all the parent div must have an height and width setted .. in your case the

<div class="container">

is not setted

try this way

html, body, .container,  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}

code snippet:

function initialize() {  var map = new google.maps.Map(    document.getElementById("map"), {      center: new google.maps.LatLng(37.4419, -122.1419),      zoom: 13,      mapTypeId: google.maps.MapTypeId.ROADMAP    });
}google.maps.event.addDomListener(window, "load", initialize);

html, body, .container,  #map {    width: 100%;    height: 100%;    margin: 0;    padding: 0;}#map {    position: relative;}

<script src="https://maps.googleapis.com/maps/api/js"></script><div class="container">
  <div id="map"></div>
</div>

height=100% not rendering the google maps api

The reason why 100% doesn't work is because the map needs to send you images at a specific ratio (fixed width & height). Now I might be guessing here, but that's what I think happens.

Since I had a similar problem, where my map was hidden inside a tab, I wrote this function to calculate the width & height or a ratio. Then whatever size of the container, the map was in, it would adjust. It uses jQuery so I just thought I'd post it to get the idea.

    /**
     * Calculate the dimensions
     */
    calculateMap: function () {
        var self = this,
            parent = this.map.parent(), // jQuery obj
            w, h, id, el;

        // if the container of your map is visible and wrapped it has a certain width and height...
        // if it also has 100% height, it could be collapsed (not wrapped)
        // so you ask the google maps api to load images at 500px width and 0height?
        // if the parent has 0height, the ratio helps to set it properly
        // with debug tools (F12) you can see the parent if it lights up
        if (parent.is(':visible')) {
            w = parent.outerWidth(false);
            h = w * this.settings.options.mapRatio; // 4/3 | 16/9
            this.map.css({ width: w, height: h });
        } else {
            // if your map is invisible after load...
            id = this.onParent.prop('id'); // this id references my tab
            el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab
            // add click event once
            el.one(this.settings.events.onParent, function() {
                setTimeout(function() {
                    self.activate(); // goes back to calculateMap()
                }, 200);
            }.bind(this));
        }
    },

If you trigger calculateMap on the resize event, you'll have a responsive approach.

Also a quick google showed me this approach ... notice the fixed width and height on the iframe.

In short:

fixed width and height in css gives you the cleanest solution. you might be able to use a clearfix, padding in % or min-height in px to gain dimension if that works out.
For dynamic/event loading I suggest JavaScript or jQuery
or with an iframe and a fixed width and height

Google maps doesn't appear when i set the height to 100%

The reason is you're not setting any height/width for body.

#body {  //wrong selector
    height: 100%;
}

#container {
    height: 100%;
}

Always use

html, body {
  width: 100%;
  height: 100%;
}

How to get a google map to use 100% of its parent container?

Google says:

Unless you specify a size explicitly for the map using GMapOptions in the constructor, the map implicitly uses the size of the container to size itself.

So set the size of your map container fill all available space:

<div id="map2" style="width: 100%; height: 100%"></div>

Set Google Maps container size equal to md-card-content width

I don't use angular but I'd say it's because of height is not set on a parent container.
From the image you've posted it seems that you want squared map.
You can use the padding trick to maintain aspect ratio:

.map-container {  position: relative;}
.map-container:before {  display: block;  content: '';  padding-top: 100%;}
#map {  position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;  background-color: tomato; /* only for testing */}

<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<md-card flex>    <md-card-content>        <div layout="column">            <md-input-container flex="100">input</md-input-container>            <!-- ... -->            <div class="map-container">              <div id="map">            </div>        </div>        </div>    </md-card-content></md-card>

Setting height of google map

You are right the parent must have an height for your map to take the same place. You can have a look at this if you want 100% height : Set Google Maps Container DIV width and height 100%

Set Google Maps Container Div Width and Height 100%