Угловое отображение карты Google в сером цвете

Question

Моя карта только частично загружает элементы управления картой, но не отображает реальную карту:

мой HTML

<div class="my-meets-map">
                        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options">
                            <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
                            </ui-gmap-marker>
                        </ui-gmap-google-map>
                    </div>

В контроллере:

$scope.map = {
            center: {
                latitude: 0,
                longitude: 0
            },
            zoom: 12
        };
        $scope.options = { scrollwheel: true };
        $scope.marker = {
            id: 1,
            coords: {
                latitude: 0,
                longitude: 0
            },
            show: false
        };

В CSS:

.angular-google-map {
                height: 100%;
            }
            .angular-google-map-container {
                height: 100%;
            }

Этот скриншот выше, в мобильном. И на настольном компьютере, и на планшете он отображается правильно. И если мы изменим размер экрана мобильного устройства в Chrome, то карта также будет отображаться правильно.

Благодарю.

Answer 1

Просто я добавил условие ng-if, где есть карта div.

В моем HTML:

<div class="col-xs-12 my-meets-map" data-ng-if="render">
     <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options">
         <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
         </ui-gmap-marker>
     </ui-gmap-google-map>
</div>

В моем контроллере:

$scope.render = false;
$timeout(function () {
  $scope.render = true;
},0);

Делая это, наша HTML DOM рендерится через некоторое время со всеми значениями.