Google Maps v3 with MeteorJS loading sync issue

Question

My app is running on MeteorJS framework and using google maps (javascript api v3). Google maps loading scheme is similar to one explained in this post , and it's pretty analogous to the official tutorial . But sometimes on it's loading the app throwing a repeated exception:

Uncaught TypeError: Cannot read property 'lat' of null

the following piece of code cause it (unfortunately, minified):

function $H(a, b, c, d) {
    var e = c[B], f = new jB(d);
    f[p]("title", e);
    b[p]("draggableCursor", e, "cursor");
    var g = e.Nb;
    Q("click dblclick rightclick mouseover mouseout mousemove mousedown mouseup".split(" "), function(d) {
        S[z](b, d, function(e, q, s) {
            var v = a[Wp](e, !0);
            e = new U(v.lat(), v.lng()); //here, v is probably null 
        })
    })
}

I'm pretty sure that's loading synchronization issue: a) the app is working fine and the errors are thrown in only first seconds of loading. b) this happens much frequently in production, naturally the loading times there are longer.

PS I can link to my app if it'll help.

Answer 1

This is how I address google-maps v3 loading in my application, basically it involves declaring a reactive ready method on a GoogleMaps object that is set to true once we are sure the script is loaded.

client/lib/google-maps.js :

GoogleMaps={
  // public methods
  config:function(options){
    _.extend(this,options);
  },
  ready:function(){
    this._loadingDependency.depend();
    return this._ready;
  },
  // private methods
  _loaded:function(){
    this._ready=true;
    this._loadingDependency.changed();
  },
  // public members
  apiKey:"",
  // private members
  _ready:false,
  _loadingDependency:new Deps.Dependency()
};

_googleMapsLoaded=function(){
  GoogleMaps._loaded();
};

Meteor.startup(function(){
  if(!GoogleMaps.apiKey){
    throw new Meteor.Error(-1,"API key not set, use GoogleMaps.config({apiKey:YOUR_API_KEY});");
  }
  $.getScript("https://maps.googleapis.com/maps/api/js?key="+GoogleMaps.apiKey+"&callback=_googleMapsLoaded");
});

Now we can use the ready method inside a GoogleMapsView template rendered callback :

client/views/google-maps-view/google-maps-view.js :

<template name="GoogleMapsView">
  <div class="google-maps-view"></div>
</template>

Template.GoogleMapsView.rendered=function(){
  this.autorun(_.bind(function(){
    if(GoogleMaps.ready()){
      this.mapOptions={
        center:new google.maps.LatLng(48.8582,2.2945),
        zoom:15
      };
      this.map=new google.maps.Map(this.find(".google-maps-view"),this.mapOptions);
    }
  },this));
};

Answer 2

Well the reason to the loading errors laid in initialize function. The function created a map without map options, and when connection with Meteor server side was established, map options were added to the map. In this gap of time between map creation and options setting the errors appeared. The lesson is: add options to created map in the same code piece.