Google API über Javascript eingefügt

Question

So habe ich eine HTML-Seite und als Teil meiner Aufgabe muss ich die HTML-Seite rippen und es mit Javascript neu erstellen. Ich habe den Aufwand meiner Website in Javascript erstellt und möchte nun einige Funktionen hinzufügen.

Auf der folgenden Seite möchte ich eine Google Map API hinzufügen und im 'MainWindow' anzeigen, Die Funktion wird auf einem sideMenu aufgerufen und wurde getestet und funktioniert.

function MainBody() { 
var x = document.getElementById("mainWindow"); 

x.style.width = "1200px"; 
x.style.height = "750px"; 
x.style.position = "absolute"; 
// started using 'zIndex' to 1. orginising on the site and 2. visually show where everything is meant to be in the code 
x.style.zIndex = "0"; 
x.style.margin = "0px 0px 0px 300px"; 
x.style.background = "#c01e0c"; 
x.style.border = "thick solid #901709"; 
x.style.borderWidth = "10px"; 
} 





function setUpListener2() { 
document.getElementById("listItem3").addEventListener("click", Option3, false); 
} 




function Option3() { 
    var subX1 = document.getElementById("mainWindow"); 

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

    subX1.appendChild(map); 
    map.style.zIndex = "1"; 


} 

Answer 1

var my_google_script = document.createElement('script'); 

my_google_script.setAttribute('src','https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'); 

document.head.appendChild(my_google_script);