javascript - Google Maps在Angular指令中未正确初始化

我正在尝试使用Google Maps API在Angular网站内显示地图，但它似乎未正确初始化。

我的html页面使用bootstrap nav nav-tabs，并且我使用Angular控制器在它们之间进行切换。

<ul class="nav navbar-nav">
    <li ng-class="{ active:myCtrl.isSet('map') }">
        <a href ng-click="myCtrl.setTab('map')">Show Map</a>
    </li>
</ul>

其中一个标签仅包含google map canvas元素-使用angular指令设置

Module.directive('mapPage', function() {
    return {
        restrict: 'E',
        template: '<div id="map-canvas"></div>'
    };
});

在我的角度控制器中，我为窗口“ load”事件设置了一个侦听器，以初始化地图，如下所示：

google.maps.event.addDomListener(window, 'load', myCtrl.initMap);


myCtrl.initMap = function() {

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(55.937879, -3.241619),
    };

    myCtrl.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(55.937879, -3.241619),
        map: myCtrl.map
    });

    myCtrl.map.setCenter(new google.maps.LatLng(55.937879, -3.241619));
}

我在屏幕上看到的是地图元素，显示一个灰色区域，位置标记未正确居中（刚好在屏幕外）。

如果我将map-canvas div移到index.html页面的主要部分（而不是应用程序中的子页面），它将正确加载，因此我知道我的Google API js代码和html是正确的。该地图还显示页面是否已调整大小。

当在未立即呈现的页面上使用时，它只是不起作用。我曾尝试搜索类似的问题/答案，但找不到此特定问题。

我创建了一个简单的小提琴来演示该问题。

http://jsfiddle.net/johntough/nc0u7h2c/5/

任何帮助表示赞赏！

最佳答案

问题是，您是在窗口加载时加载地图，而容器将在单击时出现。 Google Map的行为（虽然尚未见文献记载，但我已经观察了很多次），如果容器在加载时隐藏，则不会在其中加载地图。我将您的“负载”更改为“点击”，并且可以正常工作。唯一的变化如下

google.maps.event.addDomListener(window, 'click', myCtrl.initMap);

查看小提琴并验证自己。 http://jsfiddle.net/anandgh/nc0u7h2c/6/