Angularjs 获取错误无法读取属性'；网间距'；当尝试从“启动谷歌地图”时；“运行”；角度法

我有以下启动谷歌地图的服务：

app.service('mapService', ['$q', '$rootScope', function($q, $rootScope) {
            var self = this;
            var geocoder = new google.maps.Geocoder();
            var streetViewService = new google.maps.StreetViewService();
            self.map = false;
            self.panorama = false;
            self.center = null;

            self.initialize = function(map_id) {
                    var options = {
                            center: new google.maps.LatLng(0, 0),
                            zoom: 3,
                            scaleControl: true,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    self.map = new google.maps.Map(document.getElementById(map_id), options);
                    // ^^^ here get error 
                     };
     ....

我的

app.js

看起来像：

var app = angular.module('cntsApp', []); //['AngularGM']

app.config(['$routeProvider', function($routeProvider) {
                $routeProvider.when('/mapboard', {templateUrl: config.base_url + 'app/partials/cnts.html', controller: 'CntsCtrl'});                
        }]);


app.run([
    '$rootScope',
    '$window',
    'mapService',
    function($rootScope, $window, mapService) {

       mapService.initialize("heatmapAreaA");

        }]);

如您所见，我从

app.run调用
mapService.initialize（/**/）
，但得到异常：

 Uncaught TypeError: Cannot read property 'offsetWidth' of null

从其他帖子来看，这意味着谷歌地图仍然没有渲染，我需要等待DOM完成

在我的情况下，我如何才能做到这一点

[编辑]

HTML

<div ng-controller="CntsCtrl">

    <div class="container" style="width: 96%">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-2 column">
                        Config
                    </div>
                    <div class="col-md-6 column">
                        <div id="heatmapAreaA" ></div>
                    </div>
                    <div class="col-md-4 column">
                        Chart
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


配置
图表

从控制器行：
mapService.initialize（“heatmapAreaA”）；很好。

谢谢，
我无法测试它，但我猜您的视图html尚未完全由Angular编译，因此Google Maps无法找到您的div来显示地图。试着把

mapService.initialize("heatmapAreaA"); 

为您的视图调用控制器并将调用置于$timeout中：

$timeout(function(){
  mapService.initialize("heatmapAreaA"); 
});

这样，在控制器运行并且您的视图被编译之后，调用就会被触发
 我也有同样的问题，你们每个人都能解决吗？