CODEWITHSUNDEEP
javascriptgoogle-mapsmeteor
reku
reku

Reputation: 763

Meteor template rendered asynchronously - Cannot read property 'offsetWidth' of null

I think I stumbled upon this weird issue when using gmaps api. I randomly get the issue saying Cannot read property 'offsetWidth' of null when drawing map.

In 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();
}

My understanding is first mapPlaceHolders would add my div map-canvas to the window well before gmap is initialized. But randomly I see error

     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)

Upvotes: 1

Views: 558

Answers (2)

yanivnizry
yanivnizry

Reputation: 86

Use googlemaps-mateor package instead and remove the google maps script line from the header or footer. It worked for me.

Upvotes: 0

reku
reku

Reputation: 763

I found a workaround to hardcode wait time until the map-canvas element is created and it seems no other way

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();
}

Upvotes: 1

Related Questions