Угловые Карты Google не отображаются

Question

У меня угловые Карт Google работают, но карта не отображается на моем веб-сайте. Мой JS загружает карты, я могу распечатать свойства карты. Самое главное, когда я перехожу к своему отладчику Chrome AngularJS, я вижу картинку с картой, живущей в моем объеме, но она не отображается на моей странице. На странице API Google я вижу, что запросы выполняются. Итак, что я делаю неправильно, чтобы на самом деле не отображать эту карту? Представление импортируется через директиву ng-view с ng-маршрутами.

Благодарим за помощь!

Угловой:

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

Соответствующие 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: Включено мой 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. Его на самом деле довольно сложно, чтобы он соответствовал экрану. Это работает для меня:

Я имел навигационную панель, которая имела 4EM высоту и второстепенную навигационную панель с высотой 64px

.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>