要素を作成してAPIを挿入する

Question

Googleマップを配置するには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> 

ます。また、Googleマップのスクリプトタグを削除し、jQueryの$.getScript()やhttps://github.com/filamentgroup/loadJSを使用して、プレーンJSとを使用してjavascript.jsに動的にロードすることができ、コードをコールバックとして実行します。

Answer 2

initMapは、スクリプトが読み込まれると起動しますが、createは、pタグをクリックするまで呼び出されません。ここではその問題を回避する方法ですが、スクリプトはクリックを許可する前にロードされるのをまだ待っ：このシナリオでは

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関数が起動します。