Javascript Google地图在AngularJs指令中未正确加载

我遵循了来自的这个简单示例，并将其转换为一个简单的角度指令

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>

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

view.html

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

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

位置

我想这可能与DOM的加载有关。但我不确定。下面是展示的内容（见下图）

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

谢谢你的帮助

p.S.

有时，当我来自另一个

ui路由器

状态时，地图会加载，但当我直接在地图

ui路由器

状态下刷新页面时，地图不会加载

更新

---

添加了整个view.html

您可以在加载Angular脚本和Google maps库的地方添加html吗？（变量

uluru

来自哪里？+1到实际页面。您添加了APi密钥吗？另外-查看开发者控制台-我确信它会有一些有用的错误消息。@ValLeNain@kaskedar

view.html

只是一个标准的

ui路由器

视图。但是我更新了它。是的，API键是存在的。@ValLeNain

uluru

来自文档，我只是忘了用

scope.center

替换is。你能在加载Angular脚本和Google地图库的地方添加HTML吗？（变量

uluru

来自哪里？+1到实际页面中。您添加了APi密钥吗？另外-查看开发者控制台-我确信它会有一些有用的错误消息。@ValLeNain@kaskedar

view.html

只是一个标准的

ui路由器

视图。但是我更新了它。是的，API键存在。@ValLeNain

uluru

来自文档，我忘了用

scope.center

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

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