Custom callback with Google Maps loading flow

custom-callback-with-google-maps-loading-flow.js

// setup

!(function(root)    {
    
    var AsyncGoogleMap = (function()    {
        
        // constructor
        function AsyncGoogleMap(canvas, lat, lng, zoom, callback) {
            
            if ( typeof canvas === 'undefined' ) 
                throw new Error('Map canvas not found');
            
            this.canvas = canvas;
            this.callback = callback;
            this.mapDefault = {
                position: new google.maps.LatLng(lat, lng),
                zoom: zoom
            };
          
            this.init();
        }
        
        AsyncGoogleMap.prototype = {
          init: function() {
            var that = this;
            that.map = new google.maps.Map(that.canvas, that.mapDefault);
              
              google.maps.event.addListenerOnce(that.map, 'tiles_loaded', function()    {
                  return (that.callback && typeof that.callback === 'function') ? callback.call(this, that.map) : false;
              });
          }  
        };

        return AsyncGoogleMap;        
    })();
  
    root.AsyncGoogleMap = AsyncGoogleMap;
    
})(this);


// Use example
var canvas = document.getElementById('canvas');
var asyncGMap = new AsyncGoogleMap(canvas, 30, 70, 8, function(map) {
    // console.log(map);
});