谷歌地图未在 Angular 指令中正确初始化

Question

我正在尝试使用 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>

其中一个选项卡仅包含谷歌地图画布元素 - 使用角度指令设置

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

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

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/

任何帮助表示赞赏！

Answer 1

问题是，您在窗口加载时加载地图，而容器将在点击时出现。谷歌地图的行为（从未见过记录，但我观察过很多次）如果容器在加载时隐藏，它不会在那里加载地图。我将您的“加载”更改为“点击”并且它的工作。唯一的变化如下，

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

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