Get error Cannot read property 'offsetWidth' when try to initiate Google maps from "run" method in Angular

Question

I have following service that initiate Google maps:

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 
                     };
     ....

My app.js looks like:

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");

        }]);

As you can see I call mapService.initialize(/**/) from app.run but get Exception:

 Uncaught TypeError: Cannot read property 'offsetWidth' of null

From other posts its mean that Google maps still didn't render and I need wait till DOM will finish.

How can I achieve that in my case?

[EDIT]

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>

From controller the line: mapService.initialize("heatmapAreaA"); works fine.

Thanks,

Answer 1

I can't test it, but my guess is your view html hasn't completely been compiled by Angular, therefor Google Maps can't find your div to display the map in. Try putting the

mapService.initialize("heatmapAreaA"); 

call in a controller for your view and put the call in a $timeout:

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

This way the call gets fired after the controller has run and your view has been compiled.