Make the div height fill the remain size of the screen.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

  <script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.3.2/angular-animate.min.js"></script>
  <script src="https://code.angularjs.org/1.3.2/angular-aria.min.js"></script>
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
  <script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>

  <script src="app.js"></script>


  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css" />
  <link rel="stylesheet" href="style.css" />

</head>

<body ng-app="app">
  <div ng-controller="appController" layout="column" style="height:100vh;overflow:hidden;">
    <!-- TOPBAR -->
    <md-toolbar layout="row" scroll-shrink="" layout-align="space-between center" class="md-whiteframe-z1">
      <div flex="">
        <div class="md-toolbar-tools">
          <md-button ng-click="toggleSidebar()"></md-button>
          <h1>
              <span style="font-size: xx-large" class="agricultechFont">Agricultech</span>
            </h1>
        </div>
      </div>
    </md-toolbar>
    <!--END TOPBAR -->

    <!-- MAIN CONTENT -->
    <md-content id="main" layout="row" style="overflow:hidden;height: 100%;">

      <div flex layout="column">
        <!-- MAP -->
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
          <ui-gmap-marker idkey="marker.id" coords="marker.coords" options="marker.options" click="onClick()" events="marker.events">
            <ui-gmap-window options="windowOptions" closeClick="closeClick()">
              <div layout="column">
                {{title}}
                <md-button class="md-primary"
                                                   ng-click="button1callback()">
                                            BUTTON1
                                        </md-button>
                                        <md-button class="md-accent md-fab md-raised" style="width:35px;height:35px"
                                                   layout-align='center center'
                                                   ng-click="button2callback()">
                                            BUTTON2
                                        </md-button>
              </div>
            </ui-gmap-window>
          </ui-gmap-marker>
        </ui-gmap-google-map>
      </div>
    </md-content>
  </div>
</body>

</html>

var app = angular.module('app', ['ngAnimate',
  'ngMaterial','uiGmapgoogle-maps'
])

app.controller("appController", function($scope) {

  $scope.button1callback = function () {
    console.log("BUTTON1 CLICKED!!")
  }
  $scope.button2callback = function () {
    console.log("BUTTON2 CLICKED!!")
  }

  $scope.map = {
    center: {
      latitude: 40.1451,
      longitude: -99.6680
    },
    zoom: 4
  }
  $scope.options = {
    scrollwheel: false
  };
  $scope.marker = {
    coords: {
      latitude: 40.1451,
      longitude: -99.6680
    },
    show: false,
    id: 0
  };

  $scope.windowOptions = {
    visible: false
  };

  $scope.onClick = function() {
    $scope.windowOptions.visible = !$scope.windowOptions.visible;
  };

  $scope.closeClick = function() {
    $scope.windowOptions.visible = false;
  };

  $scope.title = "Window Title!";
  
});


#mdAdd {
  position: fixed;
  right: 2%;
  bottom: 24px;
}

md-content#main {
  background-color: #ececec;
}

.maincolumn {
  min-height: 550px;
}

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

md-card {
  background-color: #ffffff;
}

.custom-card {
  margin: -1px 0px;
  border: 1px solid #d3d3d3;
  cursor: pointer;
  border-radius: 0px !important;
  padding: 10px;
}

.custom-card:hover {
  background-color: #ececec;
}