Automatically resizing to fit

app/assets/javascripts/darkswarm/controllers/map_controller.js.coffee

@@ -6,4 +6,3 @@ Darkswarm.controller "MapCtrl", ($scope, MapConfiguration, OfnMap)->
       longitude: 144.743663
     zoom: 8
     styles: MapConfiguration.options
-

app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee

@@ -0,0 +1,10 @@
+Darkswarm.directive "fillVertical", ($window)->
+  restrict: 'A'
+
+  link: (scope, element, attrs)->
+    setSize = ->
+      element.css "height", ($window.innerHeight - element.offset().top)
+    setSize()
+
+    angular.element($window).bind "resize", ->
+      setSize()

app/assets/stylesheets/darkswarm/map.css.sass

@@ -1,5 +1,7 @@
 // Place all the styles related to the map controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-.angular-google-map-container
-  height: 600px
+.ofn-map-container
+  map, .angular-google-map-container, google-map, .angular-google-map
+    display: block
+    height: 100%

app/views/map/index.html.haml

@@ -3,10 +3,11 @@
 
 = inject_json "enterprisesForMap" , "enterprises_for_map", collection: @enterprises
 
-%map{"ng-controller" => "MapCtrl"}
-  %google-map{center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
+.ofn-map-container{"fill-vertical" => true}
+  %map{"ng-controller" => "MapCtrl"}
+    %google-map{center: "map.center", zoom: "map.zoom", styles: "map.styles", draggable: "true"}
 
-    %markers{models: "OfnMap.enterprises", fit: "true", 
-    coords: "'self'", icon: "'icon'", click: "'reveal'"} 
+      %markers{models: "OfnMap.enterprises", fit: "true", 
+      coords: "'self'", icon: "'icon'", click: "'reveal'"}