Angular Google Maps Not Displaying

Question

I have Google Maps running Angular, but the map does not appear on my website. My JS is loading maps, I can print map properties. Most importantly, when I go to my Chrome AngularJS debugger, I see a picture with a map living in my volume, but it does not appear on my page. On the Google API page, I see that requests are being executed. So what am I doing wrong to not actually display this map? The view is imported using the ng-view directive with ng routes.

Thanks for the help!

Angular:

    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};
        })
}])

Relevant HTML:

<script src="./assets/js/angular-google-maps.js"></script>
<script src="./assets/js/lodash.js"></script>
<link rel="stylesheet" type="text/css" href="/app/trips/viewtrips.css">

<div ng-controller="TripsController as tripCtrl">

    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

</div>

CSS

.angular-google-map-container {
    height: 300px;
}
.angular-google-map {
    height: 300px;
}

: CSS. , CSS . . , .css, . , , css, . liveEdit PyCharm, , .css, PyCharm, ! - .

cang. map-google-map css Chrome , . .css liveEdit , .angular-google-map viewtrips.css 7. ?:

Fiddle: https://jsfiddle.net/diesel555/z12k2djv/2/

Answer 1

- , - , . , CSS .

.css URL- . back-end, , , .css .

Answer 2

css. , . :

, 4 , sub nav 64

.map-wrapper {
    position: relative;
    height: calc(100vh - 4em - 64px);
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

html

<div class="map-wrapper">
    <ui-gmap-google-map>
    ...
    </ui-gmap-google-map>
</div>