Google Map未在AngularJs指令中正确加载

Question

我从Google Maps Documentation跟踪了这个简单的样本并转换为一个简单的角度指令。

MC-maps.directive.js

...

return {
    restrict: 'EA',
    scope: {
        center: '=center',
    },
    templateUrl: 'app/directives/mc-maps/mc-maps.html',
    link: link,
};

function link(scope, element, attrs){

    var map = new google.maps.Map(element[0].querySelector('#map'), {
        zoom: 4,
        center: scope.center
    });
    var marker = new google.maps.Marker({
        position: scope.center,
        map: map
    });
}

...

MC-maps.html

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

view.html

<h3>Location</h3>
<div>
    <mc-maps center="{lat: -25.363, lng: 131.044}"></mc-maps>
</div>

我想也许它与加载DOM有关。但我不确定。这是显示的内容（见下图）。

有时标记显示在最右侧，但在很短的时间后消失。

感谢您的帮助。

P.S。

当我来自另一个ui-router状态时，有时会加载地图，但是当我只是直接在地图ui-router状态刷新页面时，它就不会加载。

更新

添加了整个 view.html