title: Angular Google Maps does not Display
body: <p>I have Angular Google Maps working it appears, but the map does not show on my website.  My JS loads the maps, I can print out the map properties.  Most importantly, when I go to my Chrome AngularJS Debugger, I can see a picture of the map living in my scope, but it doesn't show on my page.  On Google's API page, I can see requests are being made.  So what am I doing wrong to cause it to not actually display this map?  The view is being imported via the ng-view directive with ng-routes.</p>
  
  <p>Thank you for any help!</p>
  
  <p><img src="https://i.stack.imgur.com/PZvQx.png" alt="Image of developer pane"></p>
  
  <p>Angular:</p>
  
  <pre><code>    uiGmapGoogleMapApiProvider.configure({
          key: 'MY_KEY',
          v: '3.17',
          libraries: 'weather,geometry,visualization'
      })
  
  tripApp.controller('TripsController', ['$scope', 'uiGmapGoogleMapApi',
      function ($scope, uiGmapGoogleMapApi) {
  
          uiGmapGoogleMapApi.then(function (maps) {
              $scope.map = {center: {latitude: 39.8433, longitude: -105.1190}, zoom: 10};
          })
  }])
  </code></pre>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;script src="./assets/js/angular-google-maps.js"&gt;&lt;/script&gt;
  &lt;script src="./assets/js/lodash.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="/app/trips/viewtrips.css"&gt;
  
  &lt;div ng-controller="TripsController as tripCtrl"&gt;
  
      &lt;ui-gmap-google-map center='map.center' zoom='map.zoom'&gt;&lt;/ui-gmap-google-map&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.angular-google-map-container {
      height: 300px;
  }
  .angular-google-map {
      height: 300px;
  }
  </code></pre>
  
  <p>Edit: Included my CSS import.  It appears that my CSS in my project is not loading properly.  Inspecting the element shows a zero height.  If I click on the element, it does not show my .css though it is imported.  I reproduced the code on fiddle and it works, but if I delete the css section, I get similar behavior.  If I run the code in liveEdit with PyCharm it gives me the issue, but if I modify the .css file while it's open in PyCharm, the map pops up!  Refresh - it's gone.</p>
  
  <p>Before live-edit, the .angular-google-map css style in the developer pane of Chrome is not there where it lists all the styles for an element.  Then I modify the .css file with liveEdit and the map displays and the styles change to .angular-google-map from viewtrips.css line 7.  Why is it not loading the styles properly on first load?:</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/diesel555/z12k2djv/2/" rel="nofollow noreferrer">https://jsfiddle.net/diesel555/z12k2djv/2/</a></p>