Javascript Meteor模板异步呈现-无法读取属性'；网间距'；空的

我想我在使用GMAPSAPI时偶然发现了这个奇怪的问题。我随机得到这样一个问题，即在绘制地图时无法读取null的“offsetWidth”属性

在main.html中

<div class="container-fluid">
   {{> mapPlaceHolders}}
   <div class="row">
      {{> dispMap}}
  </div>
</div>

<template name="mapPlaceHolders">
{{#if currentUser}}
    <div class = "row">
        <div class="google-map-canvas col-xs-9" id="map-canvas"></div>
        <div class="col-xs-3" id="directions-panel"></div>
    </div>
    <div id="outputDiv"></div>
{{/if}}
</template>



Template.dispMap.rendered = function(){
   gmap.initialize();
}

{{>地图占位符}
{{>dispMap}
{{{#如果当前用户}}
{{/if}
Template.dispMap.rendered=函数（）{
初始化（）；
}

我的理解是，第一个MapPlaceholder会在gmap初始化之前将我的div map画布添加到窗口中。但我随机地看到了错误

     Exception from Tracker afterFlush function: Cannot read property 'offsetWidth' of null
TypeError: Cannot read property 'offsetWidth' of null
    at aj (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain,geometry,places%7D.js:40:1854)
    at new Jj (https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain,geometry,places%7D.js:46:992)
    at Object.gmap.initialize (http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:118:14)
    at Template.dispMap.rendered (http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:251:8)
    at null.<anonymous> (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2970:21)
    at http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1720:14
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2029:12)
    at http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1719:15
    at Tracker.flush (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:438:11)

跟踪程序afterFlush函数异常：无法读取null的属性“offsetWidth” TypeError:无法读取null的属性“offsetWidth” 在aj(https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain，几何体，位置%7D.js:40:1854） 在新Jj(https://maps.gstatic.com/cat_js/maps-api-v3/api/js/19/1/%7Bmain，几何体，位置%7D.js:46:992） 在Object.gmap.initialize(http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:118:14) 在Template.dispMap.rendered处(http://localhost:3000/client/helpers/gmap_helpers.js?05a616018d24094e049effd64aa94b374364fbe2:251:8) 在空。(http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2970:21) 在http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1720:14 在Object.Blaze.\u与当前视图(http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:2029:12) 在http://localhost:3000/packages/blaze.js?77c0809654ee3a10dcd5a4f961fb1437e7957d33:1719:15 齐平(http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:438:11)

---

我找到了一个解决方法，可以硬编码等待时间，直到创建map canvas元素，而且似乎没有其他方法

Template.dispMap.rendered = function(){
function drawCanvas(){
            if($('#map-canvas').length){
                console.info("map-canvas added to the dom");
                $('#map-canvas').ready(gmap.initialize());
            }else
            {
                console.info("wait for map-canvas to be ready");
                setTimeout(drawCanvas, 500);
            }
        }
        drawCanvas();
}

改用package，并从页眉或页脚中删除google maps脚本行。这对我有用