6

I am using the google Maps API which requires a callback. How do I export a callback from a webpack bundle to use by an external script such as Google Maps API?

HTML (X-d out key):

<div id="hello"></div>
<script src="/js/map.bundle.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap"></script>

map.js:

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}

I build the above map.js file into a webpack bundle called map.bundle.js.

Browser console error:

Yc message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new Yc (https://maps.googleapis.com/ma...

I also tried adding

module.exports = { initMap: initMap }

to map.js but that didn't help.

EDIT: Same question, but for using javascript functions from webpack bundles in form events:

HTML:

<form onsubmit="sayHello(event)">
    <button type="submit">Say Hello</button>
</form>

JS:

function sayHello(e) {
    e.preventDefault();
    console.log("hello");
    return false;
}

When the JS is packaged into a bundle, the "hello" is no longer printed on the console

Daniel Kats
  • 5,141
  • 15
  • 65
  • 102
  • Exported module needs to be first require into a variable and you will get an exported object, then you can call your exported functions. `var initMapDep = require('./js/map.bundle'); initMapDep.initMap(); ` – psycho Feb 13 '17 at 20:31
  • I think what you are trying to do is [given here](http://stackoverflow.com/questions/34379664/google-maps-api-setting-up-callbacks-for-adding-markers-polyline) – psycho Feb 13 '17 at 20:35
  • @psycho Thanks for the suggestion but I don't see how that answers my question. My callback function does not accept a parameter. – Daniel Kats Feb 13 '17 at 21:34
  • No problem. You don't have to pass a parameter if you don't need it. Rest is the same initMap as you needed to use as a callback. – psycho Feb 14 '17 at 04:35
  • http://stackoverflow.com/questions/40575637/how-to-use-webpack-with-google-maps-api – redconservatory Feb 14 '17 at 04:37
  • npm version of `google-maps` loader will automaticly fix your problems https://www.npmjs.com/package/google-maps – Everettss Feb 14 '17 at 10:05
  • @redconservatory The solution in the linked question works for me. Do you want to write it as an answer so I can accept it, or do you want to mark the question as duplicate? I feel like it's broader than the linked question though the answer is the same. – Daniel Kats Feb 15 '17 at 00:01

1 Answers1

10

Your webpack file (map.bundle.js) does not generally write any of your functions or variables into the global (in this case, window) namespace.

This causes problems for libraries that need to be on the global namespace like jQuery or the google maps api.

One way to get around this is to add initMap to the window object

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}
window.initMap = initMap;
redconservatory
  • 21,438
  • 40
  • 120
  • 189
  • 3
    instead of `window.foo` you can also set `global.foo`. Webpack will automatically convert this to `window` if your project is targeted for web (default). See [webpack docs](https://webpack.js.org/configuration/node/#node-global) or a [related question](https://stackoverflow.com/a/40416826/3423324) – luckydonald Apr 18 '18 at 10:31