Google Maps cannot access callback function when using webpack

Question

I'm using webpack to build a small project using Google Maps and I'm having a problem with google reaching the callback function because of the way webpack builds the script. The only way I can get google to reach the callback function is by manually moving it into the global scope of the webpack build. I was wondering if there was anyway I could write it differently so that I wouldn't need to manually alter the bundled file.

Pre-build:

import {apiKey} from './apiKey';

document.addEventListener('DOMContentLoaded', function(){

let lang;

if(document.querySelectorAll('#map').length > 0){
    if(document.querySelector('html').lang){
        lang = document.querySelector('html').lang;
    } else {
        lang = "en";    
    }

    let js_file = document.createElement('script');
    js_file.type = "text/javascript";
    js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + apiKey + '&language=' + lang;
    document.getElementsByTagName('head')[0].appendChild(js_file);
};



});

   let map ;

   function initMapCallback() {
      map = new google.maps.Map(document.getElementById("map"), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 8
      });
   ;

Post-build:

/* 0 */
/***/ function(module, exports, __webpack_require__) {

'use strict';

var _apiKey = __webpack_require__(1);

var map = void 0;

function initMapCallback() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
};

document.addEventListener('DOMContentLoaded', function () {

    var lang = void 0;

    if (document.querySelectorAll('#map').length > 0) {
        if (document.querySelector('html').lang) {
            lang = document.querySelector('html').lang;
        } else {
            lang = "en";
        }

        var js_file = document.createElement('script');
        js_file.type = "text/javascript";
        js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + _apiKey.apiKey + '&language=' + lang;
        document.getElementsByTagName('head')[0].appendChild(js_file);
    };
});

  /***/ },
  /* 1 */
 /***/ function(module, exports) {

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var apiKey = exports.apiKey = 'something';

/***/ }
/******/ ]);

Answer 1

All your code runs outside of the global scope when you use webpack, in an IIFE. If you want to make something available explicitly, you can attach it to window yourself.

Just add the following after your function definition:

window.initMapCallback = initMapCallback;

Or do it in one line:

window.initMapCallback = function initMapCallback() { /* ... */ };

And that's it!