I am trying to add the callback on an ES6 file but it does not find it.

I get this error message: "initMap is not a function"

my files are this way:

<div id="map"></div>
<script async defer
    src="=<myKey>&callback=initMap"></script>

and my js file is:

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

    fetch('/data/markers.json')
      .then(function(response){return response.json()})
      .then(plotMarkers);
}

I am using browserify and babelify to transpile the js file

I have tried to move things up and down and no luck so far, the only way it works is adding the initMap function directly on the html as this guide reads:

Actually I could not find/understand where the functions on ES6 are running (which the scope is) I printed the this value inside the initMap function and it is undefined.

I am trying to add the callback on an ES6 file but it does not find it.

I get this error message: "initMap is not a function"

my files are this way:

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

and my js file is:

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

    fetch('/data/markers.json')
      .then(function(response){return response.json()})
      .then(plotMarkers);
}

I am using browserify and babelify to transpile the js file

I have tried to move things up and down and no luck so far, the only way it works is adding the initMap function directly on the html as this guide reads:

https://developers.google./maps/documentation/javascript/adding-a-google-map

Actually I could not find/understand where the functions on ES6 are running (which the scope is) I printed the this value inside the initMap function and it is undefined.

• javascript
• google-maps
• scope
• callback
• ecmascript-6

• export function initMap do you import this export? – Jaromanda X Commented Aug 22, 2017 at 6:41
• no, I added the export only for testing but I tried to import the function in another js (main.js) and it did not work either. – Arturo RV Commented Aug 22, 2017 at 6:52
• well, remove export, and load your js file before (to be sure) your load googleapis (you don't show how or where you do that) - oh, wait ... browserify ... didn't read that bit – Jaromanda X Commented Aug 22, 2017 at 6:53
• 1 We can't really reliably help you with seeing the whole layout of your code, where things are included, how things are included, etc... The way you are loading Google maps, initMap() needs to be a globally defined function that is available when google initializes. – jfriend00 Commented Aug 22, 2017 at 6:55

2 Answers 2

By using callback=initMap, Google Maps expects that initMap will be a global.

You can expose it as a global by doing window.initMap = initMap:

window.initMap = () => {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });

    fetch('/data/markers.json')
      .then(function(response){return response.json()})
      .then(plotMarkers);
};

The other way is to import the script and expose the global in the other file, like you mentioned:

import * as mapObj from "./modules/map";
window.initMap = mapObj.initMap

If you want to deliver your ES6 code without transpiling (using <script type="module"> which is always defered), you might run into the same problem and the solution above will not always work.

I think the problem is that the execution order of defered scripts is a little random and if the API script runs before your ES6 code, the error will still show.

You can fix this by removing &callback=initMap from the API <script> and waiting for the API to be defined instead:

const googleDefined = (callback) => typeof google !== 'undefined' ? callback() : setTimeout(() => googleDefined(callback), 100)

googleDefined(() => {
    // init map
})
...