How to expose callback function for Google Maps when using Browserify?

Question

I'm using Gulp and Browserify to bundle my JavaScripts. I need to expose a callback function that should be executed after the Google Maps API loads.

How can this be done without using something like window.initMap? The problem with this is that I need to fire a large number of other methods inside initMap, so there has to be a better way of doing it besides using window.functionName and polluting the global namespace.

On the other hand, is it alright to just exclude the callback parameter and do something like this instead?

$.getScript('https://maps.googleapis.com/maps/api/js').done(function() {
  initMap();
});

Any help would be greatly appreciated. I have spent more time that I would ever admit in getting this to work.

gulpfile.js:

gulp.task('browserify', ['eslint'], function() {
  return browserify('/src/js/main.js')
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(gulp.dest('/dist/js'))
    .pipe(reload({ stream: true }));
});

main.js:

require('jquery');
require('./map');

map.js:

var map = (function() {
  'use strict';

  var mapElement = $('#map');

  function googleMapsAPI() {
    $.getScript('https://maps.googleapis.com/maps/api/js?callback=initMap');
  }

  function initMap() {
    var theMap = new google.maps.Map(mapElement);
    // functions...
  }

  function init() {
    googleMapsAPI();
  }
});

map.init();

Answer 1

No, it's not okay to not include the callback parameter.

The google maps API library calls a bunch of other scripts to be loaded on the page and then, when they have all been loaded, the callback parameter is called on the window object.

Just declare it on the window object:

var MyApp = {
    init: function() {
         //all your stuff
    }
}

window.initMap = function() {
   window.initMap = null; //set this to null this so that it can't get called anymore....if you want
   MyApp.init();
};

and then just include the script tag on your page:

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 2

If you want to load the script and then do something when the script has been loaded, you can set the attributes async and onload when injecting the script. By wrapping all the code into an IIFE we will keep private all objects defined inside the IIFE, avoiding populate the global namespace window. See the following example:

// IIFE (Immediately-Invoked Function Expression)
// Keeps all private
!function() {
/**
 * Injects the script asynchronously.
 *
 * @param {String} url: the URL from where the script will be loaded
 * @param {Function} callback: function executed after the script is loaded
 */
function inject(url, callback) {
  var tag = 'script',
    script = document.createElement(tag),
    first = document.getElementsByTagName(tag)[0];
  script.defer = script.async = 1; // true
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  first.parentNode.insertBefore(script, first);
}

/**
 * Injects and initializes the google maps api script.
 */
function injectMapsApi() {
  var key = 'your-api-key';
  var query = '?key=' + key;
  var url = 'https://maps.googleapis.com/maps/api/js' + query;
  inject(url, initMapsApi);
}

/**
 * Callback that initializes the google maps api script.
 */
function initMapsApi() {
  var maps = window.google.maps;
  // ... code initializations
  console.log(maps);
}

injectMapsApi();

}(); // end IIFE

You need to register and claim you API key in order to use the google maps API. More information here:

• https://developers.google.com/maps/documentation/javascript/get-api-key
• https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

Answer 3

I honestly think here it is a better solution to simply define a global initMap function to keep things simple while taking advantage of Google Maps asynchronous initialization. It might sound like a hack, but you can define a random name for the function and then simply remove it from the global scope once Google Maps SDK has called it. This mechanism is similar to the one used in JSONP.

var functionName = getRandomName();
window[functionName] = function() {
    window[functionName] = undefined;
    // call to your initialization functions
};

In this answer you can check out that the way to prevent polluting the global scope is to make the google maps script load synchronously, what could harm user experience, specially on smartphones.

Answer 4

I've had issues with this approach Google has taken also. I don't like it very much myself.

My way to deal with this as of late has been creating the global function, with a twist of firing an event to trigger my actual application javascript. This way I have my application JS clean of dealing the maps API handling, and it's one small global function call outside of my main object.

function initMap(){
  $(document).ready(function(){
    $(window).on('GoogleMapsLoaded', myObj.init());
    $(window).trigger('GoogleMapsLoaded');
  });
};

With that I just include the callback=initMap in the script url.

UPDATE: Another option is to just include your callback as a function inside your object. Ex: your object could be something like

var app = app || {};

(function($){

   $(function(){
      $.extend(app, {
        initMap:function(yourMainWrapDiv){
           //Do whatever you need to do after the map has loaded
        },
        mapLoadFunction(){
           //Map API has loaded, run the init for my whole object
           this.initMap($('#mainWrapper'))
        },
        mainInit: function(){
           ///do all your JS that can or needs  
           // to be done before the map API loads
           this.maybeSetSomeBindings();
        },
        maybeSetSomeBindings: function(){
             //do things
        }
      });
      //On document ready trigger your mainInit
      //To do other things while maps API loads
      app.mainInit()
   });
})(jQuery);

Then you can just use the callback to jump inside your one global object and run what you need to run just for the map handling. Your API url could be with callback=app.initMap

That could keep it cleaner also

UPDATE 2: Yet another option (I minimally tested) would be to NOT use the callback parameter in the Google API url, and link it with whatever else, library wise, you needed. (places, search, etc). https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE&libraries=places for example.

Then in your object init function just set a timer with to see if the google object is available! Maybe something like this:

var app = app || {};

(function($){

   $(function(){
      $.extend(app, {
        init:function(){
          var self = this;
          var timer = setInterval(function(){
              if ($('.ex').length){ //but really check for google object
              console.log('things exist google, elements, etc..');
                  self.next();
                  clearInterval(timer);
              }
          });
        },
        next:function(){
          console.log('google object exists')
        }
      });
      app.init()
   });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='ex'>as an example for something to trigger a flag (true/false) to clear the interval</div>

in any case where you try to access the global object, in this case app, as a callback in the URL you would set callback=app.yourFunctionToCall NOT callback=app.funtionToCall() you script tag should also have the async and defer attributes attributed to it to promote further html parsing (your app's js should be directly after the maps script)