Angular Google Maps does not Display

Question

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.

Thank you for any 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;
}

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.

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?:

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

Solution 1

If your map is not displaying - check if its height is zero in some debugger by inspecting the element. If it is zero, your CSS is most likely not being imported properly.

My .css was being re-routed to a separate URL by the back end. Solved by modifying back-end, but the generic answer is with no height set it defaults to zero so the most likely problem to look at is your .css file or the import.

Solution 2

You might want to check your css. Its actually pretty hard to get it fit the screen. This worked for me :

I had a nav bar that had 4em height and a sub nav bar with 64px height

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

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

with html

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

Solution 3

This is the problem because og height is 0 or auto. Set height for agm-map will solve

agm-map{
    height: 500px
}