Google Maps Widget NoMapKeyError

I'm developing an app that uses the Google Maps widget ( https://appstore.home.mendix.com/link/app/39/Mendix/Google-Maps-Widget ), and the widget is used after navigating through several pages. I noticed that upon loading the app page, the app will load all the JavaScript sources required for the app (including google maps). I have set the API key for the Google Maps widget through the widget itself, but I realized that the console always warns me that no API key is supplied when running on local machine, testing or acceptance server. Running the app on a production server will return a console error MissingKeyMapError, and the widget would not load.

I looked into the Google Maps widget and found that the line of code below that puts the API key to the HTML source

          if (!google.maps) {
              console.log(this.id + ".update load Google maps");
                var params = (this.apiAccessKey !== "") ? "key=" + this.apiAccessKey : "";
                if (google.loader && google.loader.Secure === false) {
                    google.loader.Secure = true;
                }
                window._googleMapsLoading = true;
                google.load("maps", 3, {
                    other_params: params,
                    callback: lang.hitch(this, function () {
                        console.log(this.id + ".update load Google maps callback");
                        window._googleMapsLoading = false;
                        this._loadMap(callback);
                    })
                });

But this line of code never gets executed since google.maps already exist in the environment. Therefore, the API access key I have supplied never gets used. A workaround that I can think about is to enforce the widget to execute this line of code every time the widget loads, but this is quite ugly and definitely not a good workaround.

Another workaround that I can think about is to hard code the script below to the index.html

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

This works since it stops the constructor from creating a new script with no key, but this is not a practical solution and a bad practice.

I also attempted to use HTMLSnippet module for this, but it does not stop the constructor from creating a new script.

Does anyone have experienced this before?