google maps callback on ES6 file

Question

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.com/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.com/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.

Answer 1

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