InvalidValueError: initMap is not a function?

Question

I was never able to resolve this issue with any of the provided answers. Why is this still down voted?

I'm using the Sage theme from Roots.io

I have enqueued the Google Maps API like so:

function assets() {
  wp_enqueue_style('sage/css', Assets\asset_path('styles/main.css'), false, null);
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }
  wp_enqueue_script('sage/js', Assets\asset_path('scripts/main.js'), ['jquery'], null, true);
  wp_enqueue_script('jquery-validate', '//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js', [], null, true);

  if (is_page_template('template-about.php')) {
    wp_enqueue_script('google-maps', '//maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap', [], null, true);
  }

}

I then get this error in console:

Uncaught InvalidValueError: initMap is not a function ... js?key=MY_API_KEY&callback=initMap:95 

To try and resolve this, I have tried re-ordering the enques above and I've also tried moving the initMap() function around my Main.js.

Main.js snippet:

(function($) {

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages
        if (!$('body').hasClass('home')) {
          $(this).find('.banner').removeClass('navbar-fixed-top');
        }

        var map;
        console.log('reached');
        function initMap() {
          var location = {lat: 51.47672559, lng: -3.17107379};
          var markerloc = {lat: 51.476852, lng: -3.167869};
          map = new google.maps.Map(document.getElementById('map'), {
            center: location,
            scrollwheel: false,
            zoom: 17
          });
          var marker = new google.maps.Marker({
            position: markerloc,
            map: map,
            title: 'Hello World!'
          });
        }

      },

I did find this so I tried adding

google.maps.event.addDomListener(window, 'load', initMap);

before and after the initMap() function. I think it may be something to do with the scope, how can I fix this?

Update: Defining the function outside the Sage object doesn't fix this either

(function initMap() {
  var location = {lat: 51.47672559, lng: -3.17107379};
  var markerloc = {lat: 51.476852, lng: -3.167869};
  map = new google.maps.Map(document.getElementById('map'), {
     center: location,
     scrollwheel: false,
     zoom: 17
  });
  var marker = new google.maps.Marker({
     position: markerloc,
     map: map,
     title: 'Hello World!'
  });
});
/* ========================================================================
 * DOM-based Routing
 * Based on link by Paul Irish
 *
 * Only fires on body classes that match. If a body class contains a dash,
 * replace the dash with an underscore when adding it to the object below.
 *
 * .noConflict()
 * The routing is enclosed within an anonymous function so that you can
 * always reference jQuery with $, even when in .noConflict() mode.
 * ======================================================================== */

(function($) {

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages 
          if (!$('body').hasClass('home')) {
            $(this).find('.banner').removeClass('navbar-fixed-top');
          }
      },

Answer 1

Make sure that initMap function is global or the parameter passed as callback to google maps.js is proper.

Try Following,

'common': {
      init: function() {

        if (!$('body').hasClass('home')) {
          $(this).find('.banner').removeClass('navbar-fixed-top');
        }

       var map;
       console.log('reached');

        $(function initMap() {
          var location = {lat: 51.47672559, lng: -3.17107379};
          var markerloc = {lat: 51.476852, lng: -3.167869};
          map = new google.maps.Map(document.getElementById('map'), {
             center: location,
             scrollwheel: false,
             zoom: 17
          });
          var marker = new google.maps.Marker({
             position: markerloc,
             map: map,
             title: 'Hello World!'
          });
        })
      },

Answer 2

The initMap has to be a global function. Currently, its scope is limited to the init function inside the Sage object inside the function($) {} function. You can do something like this to fix that.

window.initMap = function() {
  var location = {lat: 51.47672559, lng: -3.17107379};
  var markerloc = {lat: 51.476852, lng: -3.167869};
  map = new google.maps.Map(document.getElementById('map'), {
     center: location,
     scrollwheel: false,
     zoom: 17
  });
  var marker = new google.maps.Marker({
     position: markerloc,
     map: map,
     title: 'Hello World!'
  });
};