Using a Promise inside of a forEach loop

Question

I am new to using Promise and cannot quite get this right.

I am trying to create a situation where I load the google maps API script if an element on the page requires it. This part I have got working, what I am struggling with is if there are more than 1 elements on the page that requires google maps API I need to only load the script once.

Here is what I have so far.

index.html

<div class="map" id="map-1" data-module="map" style="height: 100vh;"></div>

<div class="map" id="map-2" data-module="map" style="height: 100vh;"></div>

<div class="map" id="map-3" data-module="map" style="height: 100vh;"></div>

<div class="map" id="map-4" data-module="map" style="height: 100vh;"></div>

loadGoogleMapsApi.js

export default class LoadGoogleMapsAPI {
    constructor() {

        this.apiKey = '********';

        // set a globally scoped callback if it doesn't already exist
        /* eslint no-underscore-dangle: 0 */
        if (!window._GoogleMapsApi) {
            this.callbackName = '_GoogleMapsApi.mapLoaded';
            window._GoogleMapsApi = this;
            window._GoogleMapsApi.mapLoaded = this.mapLoaded.bind(this);
        }

    }

    /**
     * Load the Google Maps API javascript
     */
    async load() {
        if (!this.promise) {
            this.promise = await new Promise((resolve) => {
                this.resolve = resolve;

                if (typeof window.google === 'undefined') {
                    const script = document.createElement('script');
                    script.src = `//maps.googleapis.com/maps/api/js?key=${window._GoogleMapsApi.apiKey}&callback=${window._GoogleMapsApi.callbackName}`;
                    script.async = true;
                    document.body.append(script);
                } else {
                    this.resolve();
                }
            });
        }

        return this.promise;
    }

    /**
     * Globally scoped callback for the map loaded
     */
    mapLoaded() {
        if (this.resolve) {
            this.resolve();
        }
    }
}

map.js

import GoogleMapsApi from '../utils/loadGoogleMapsApi';

export default class MapViewModel {
    constructor(module) {

        this.module = module;

        const gmapApi = new GoogleMapsApi();

        gmapApi.load().then(() => {
            // safe to start using the API now
            new google.maps.Map(this.module, {
                center: { lat: 51.5074, lng: -0.1278 },
                zoom: 11,
            });
            // etc.
        });
    }

    static init() {
        const instances = document.querySelectorAll('[data-module="map"]');

        instances.forEach((module) => {
            const options = JSON.parse(module.getAttribute('data-map-settings'));
            new MapViewModel(module, options);
        });
    }
}

MapViewModel.init();

The issue is in the load() function (i think). I have tried all sorts of different things and this is the closest I get. It seems that the code either does not wait and puts the script tag in 4 times OR the code resolves before the script tag has loaded and my google.maps.Map(...) doesn't work.

Any help I can get will be greatly appreciated.

Cheers, Luke.

---

UPDATE

SOLVED

New code thanks to @jcubic helping me finally reach a solution.

loadGoogleMapsApi.js

export default class LoadGoogleMapsAPI {
    /**
     * Load the Google Maps API javascript
     */
    static load() {
        this.apiKey = '******';

        if (!this.promise) {
            this.promise = new Promise((resolve) => {

                if (typeof window.google === 'undefined') {
                    const script = document.createElement('script');
                    script.onload = resolve;
                    script.src = `//maps.googleapis.com/maps/api/js?key=${this.apiKey}`;
                    script.async = true;
                    document.body.append(script);
                }
            });
        }

        return this.promise;
    }
}

map.js

import GoogleMapsApi from '../utils/loadGoogleMapsApi';

export default class MapViewModel {
    constructor(module) {

        this.module = module;

        GoogleMapsApi.load().then(() => {
            // safe to start using the API now
            new google.maps.Map(this.module, {
                center: { lat: 51.5074, lng: -0.1278 },
                zoom: 11,
            });
            // etc.
        });
    }

    static init() {
        const instances = document.querySelectorAll('[data-module="map"]');

        instances.forEach((module) => {
            const options = JSON.parse(module.getAttribute('data-map-settings'));
            new MapViewModel(module, options);
        });
    }
}

MapViewModel.init();

So the 2 parts to the solution are making loadGoogleMapsApi.js a static class and moving the constructor code inside the load() function. Then also changing the load() function to not use async/await and adding script.onload = resolve .

Answer 1

If you use this this.promise = await new Promise((resolve) => { this.promise will not be a promise but value that promise resolve to, this is how async/await works. You're resolving it with undefined (no value to resolve()) so this.promise is undefined (it's always false).

EDIT you also need to call this.resolve otherwise if you call in a loop you execute it multiple times before it finish, you probably also want to resolve the promise when script will be ready:

load() {
    if (!this.promise) {
        this.promise = new Promise((resolve) => {

            if (typeof window.google === 'undefined') {
                const script = document.createElement('script');
                script.onload = resolve;
                script.src = `//maps.googleapis.com/maps/api/js?key=${window._GoogleMapsApi.apiKey}&callback=${window._GoogleMapsApi.callbackName}`;
                script.async = true;
                document.body.append(script);

            }
        });
    }

    return this.promise;
}