創建要插入API的元素

Question

我想創建一個使用javascript的div來放入我的谷歌地圖。 它創建一個div，但沒有把地圖api放進去。請幫忙。

Answer 1

在運行代碼之前，您需要確保Google Maps API腳本已加載。目前，您正在嘗試在瀏覽器下載地圖API之前構建地圖。

解決這個問題的最簡單的方法是將您的HTML改成這樣：

<script src="https://maps.googleapis.com/maps/api/js?key="Entered key here deleted it for stackoverflow"&callback=initMap"> 
<script src="javascript.js"></script> 

您也可以刪除谷歌地圖腳本標記和使用jQuery的$.getScript()或使用https://github.com/filamentgroup/loadJS純JS在javascript.js動態加載，運行你的代碼作爲回調。

Answer 2

initMap在腳本加載時觸發，但在你點擊p標記之前create沒有被調用。這裏有一個方法來解決這個問題，但仍等待腳本允許點擊之前加載：

var mapready = false, createcalled = false; 
 

 
function create() 
 
{ 
 
    createcalled = true; 
 
    if(mapready){ 
 
    var newDiv = document.createElement("map"); 
 
    newDiv.id = "map"; 
 
    newDiv.style.border="solid"; 
 

 
    document.body.appendChild(newDiv); 
 
    
 
    var uluru = {lat: 54.278556, lng: -8.460095}; 
 
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 16,center: uluru}); 
 
    var marker = new google.maps.Marker({position: uluru,map: map}); 
 
    } 
 
} 
 

 
function initMap() 
 
{ 
 
    mapready = true; 
 
    if(createcalled) create(); 
 
}

在這種情況下，如果用戶點擊了p標記之前的地圖是準備，只要地圖API完成加載，create函數就會觸發。