title: how to set google maps to 100% height in ngMap
body: <p>Hey I am using <a href="https://ngmap.github.io/" rel="nofollow">ngMap</a> in order to display google map components.
  Now for a very basic example, I am using bootstrap and try to put the google map on half of the screen,therefore I give it col-lg-6. </p>
  
  <p>But apparently I get always the same height which is 300px.
  I want the google map component to be in height of 100% and not a fixed height(which isn't responsive at all).
  This is the code which I am talking about:</p>
  
  <p>Here is a plunker of the problem:<a href="http://plnkr.co/edit/BQgMe5EQiFBmojgx45t5?p=preview" rel="nofollow">http://plnkr.co/edit/BQgMe5EQiFBmojgx45t5?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app=angular.module('myapp', ['ngMap']);
    app.controller('EventSimpleCtrl', ['$scope', '$timeout', function($scope, $timeout) {
      var marker, map;
      $scope.$on('mapInitialized', function(evt, evtMap) {
        map = evtMap;
        marker = map.markers[0];
      });
      $scope.centerChanged = function(event) {
        $timeout(function() {
          map.panTo(marker.getPosition());
        }, 3000);
      }
      $scope.click = function(event) {
        map.setZoom(8);
        map.setCenter(marker.getPosition());
      }
    }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.map .panel-body {
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="myapp"&gt;
  
  &lt;head&gt;
    &lt;link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /&gt;
    &lt;script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3"&gt;&lt;/script&gt;
    &lt;script src="http://code.angularjs.org/1.2.25/angular.js"&gt;&lt;/script&gt;
    &lt;script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div ng-controller="EventSimpleCtrl" class="ng-scope"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;!--&lt;div class="panel panel-primary map"&gt;--&gt;
          &lt;!--  &lt;div class="panel-heading"&gt;Test&lt;/div&gt;--&gt;
          &lt;!--  &lt;div class="panel-body"&gt;--&gt;
          &lt;!--    &lt;map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()"&gt;--&gt;
          &lt;!--      &lt;marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"&gt;&lt;/marker&gt;--&gt;
          &lt;!--    &lt;/map&gt;--&gt;
          &lt;!--  &lt;/div&gt;--&gt;
          &lt;!--&lt;/div&gt;--&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-6"&gt;
          &lt;map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()"&gt;
            &lt;marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"&gt;&lt;/marker&gt;
          &lt;/map&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>