нг-карта показывает частичную карту в HTML

Question

Я использую нг-карту в Angular.js По какой-то причине моей карты картины серого цвета, 90% всей карты, например так:

Моего HTML является довольно просто:

<div id="map"> 
<map></map> 
</div> 

Я даже пытался добавить CSS вот так:

<style> 
    #map{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 

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

$scope.$on('mapInitialized', function(event, map) { 
    $scope.map.setCenter(new google.maps.LatLng($scope.location.latitude, $scope.location.longitude)); 
    $scope.setZoom(4); 
} 

Я добавил скрипты для использования ngMap. Я также удалил любой AdBlock, если это может вызвать проблему.

EDIT: google.maps.event.trigger (map, 'resize'); работы

Answer 1

Когда ваша карта была инициализирована, это было сделано в контейнере без размеров (0 ширина и/или высота 0). Таким образом, карта не знает, какой размер она должна быть.

Вы должны явно задать ширину и высоту на вашем элементе перед вашей карте инициализируется, или, если это невозможно, вызовите google.maps.event.trigger(map,'resize'); (где map является экземпляр карты Google), если ваша карта была инициализирована на скрытый элемент (нет ширина/высота), который становится видимым.

Примечание:

Установка #map быть height:100% не имеет никакого эффекта, если #map «s родительский элемент не имеет явно высоту. Идем дальше, установите #map, чтобы быть height: 300px, и вы увидите, что он «работает» внезапно.

Если вы хотите, чтобы карта будет полный экран, то вы должны установить высоту html/body элементов:

html,body,#map { height: 100%; } 

Answer 2

Я посмотрел в исходный код Ng-Map, и я нашел этот кусок:

/** 
    * if style is not given to the map element, set display and height 
    */ 
    if (getStyle(element[0], 'display') != "block") { 
    element.css('display','block'); 
    } 
    if (getStyle(element[0], 'height').match(/^(0|auto)/)) { 
    element.css('height','300px'); 
    } 

Он будет использовать атрибут высоты (и, возможно, ширины) на элементе карты. Так easyest решение вашей проблемы, чтобы просто установить ширину и высоту на карте:

<div id="map"> 
<map style="width:100%;height:100%;"></map> 
</div> 

EDIT: нг-карта будет вызывать google.maps.event.trigger(map,'resize'); сразу же после установки высоты DIV, так что вы не должен.

/** 
    * resize the map to prevent showing partially, in case intialized too early 
    */ 
    $timeout(function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 

Answer 3

У меня была такая же проблема при навигации между 2 видами с использованием ui-router (у каждого вида была своя карта). Я исправил эту проблему, установив ширину контейнера карты можно в высоту и до 100%, добавив идентификатор в нг-карту в HTML и добавлением следующего кода в контроллер состояния:

NgMap.getMap({id: 'myMapId' }).then(function(map) { 
    google.maps.event.trigger(map, 'resize'); 
});