Using Google Maps API to display a map in custom visual

As an update, I have attempted to use the solutions given in an old thread which appends options.element directly with Javascript:

   constructor(options: VisualConstructorOptions) {
        let mapDiv = document.createElement('div');
        mapDiv.id = 'map';
        mapDiv.style.height = "550px";
        options.element.appendChild(mapDiv);        
        let js = document.createElement('script');
        js.innerHTML = "var map;"
                        + "function initMap() {"
                        + "map = new google.maps.Map(document.getElementById('map'), {"
                        + "center: {lat: -34.397, lng: 150.644},"
                        + "zoom: 8"
                        + "});"
                        + "}"
                        + "initMap()";
        options.element.appendChild(js);
        
        js = document.createElement('script');
        js.src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly";
        options.element.appendChild(js);
    }

 (Thread found here: https://community.powerbi.com/t5/Developer/Use-Google-Map-API-in-custom-visual/td-p/190346)

However, I don't know if this is an issue with PowerBI Visual API being updated since then or an error with my code, but this still gives a blank visual. I have even inspected the code for the visual div element on PowerBI service and can see that the script for the Google Maps API is running - but there still is no output other than a blank window.

I have tested the same code on a blank HTML page, which displays the map easily enough but it refuses to work on this PowerBI visual - am I missing something?