Javascript経由でGoogle APIを挿入

Question

私はHTMLページを持っており、割り当ての一環として、HTMLページをリッピングしてJavascriptで再構築する必要があります。私はjavascriptで私のサイトの支出を作成し、今いくつかの機能を追加したい。

次のページでは、GoogleマップAPIを追加して 'MainWindow'に表示したいと考えています。この関数はサイドメニューで呼び出され、テストされて動作しています。

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);