2017-02-10 9 views
2

私は、オンライン/オフラインの状況を扱うアプリケーションを持っています。 今、アプリケーションが最初にオフラインで実行され、APIが読み込まれずに空白のマップページが表示される場合があります。Google Mapの再初期化/再起動Api

Googleマップapiの呼び出しは、このようなものになります。

<script src="http://maps.google.com/maps/api/js?key=APIKEY"></script> 

私はすでに、私は私のGoogleマップAPIが初期化されているかどうかをチェックしますか、どのように私は再初期化するにはどうすればよいこの

document.addEventListener("offline", function() 
{ 
    console.log("in offline event listener"); 

}, false); 

document.addEventListener("online", function() 
{ 
    console.log("in online event listener"); 

}, false); 

のようなものであるオフライン/オンライン状況を扱うイベントリスナを追加しましたそれ?

更新1: 私は

var script = document.createElement("script"); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("src", "http://maps.google.com/maps/api/js?key=APIKEY"); 
document.getElementsByTagName("body")[0].appendChild(script); 

を介して実行時にスクリプトを挿入することができるよしかし、これは私の他のマッププラグインでの結果でGoogleマップのAPI呼び出しの複数のインスタンスが動作しない原因となります。したがって、私はまだ失敗したマップapi呼び出しを破棄するか、またはGoogleマップapiが既に正常に呼び出されて取得されているかどうかを確認する必要があります。

答えて

2

スクリプトを再起動する代わりに、インターネットに接続しているときにのみスクリプトを実行することができます。

javascriptをあなたのメインページで、index.htmlを

から<script>...</script>要素を削除します。

key = "YOUR GOOGLE MAP API KEY" 

GoogleMapInit(key); 

function GoogleMapInit(key){ 
    if (key != null){ 
    apiKey = key; 
    } 

    loadGoogleMaps(); 
} 

function loadGoogleMaps(){ 
    window.mapInit = function(){ 
    //Run any code that must be run after Google Map Api is done (E.g loading markers) 
    } 

    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.id = "googleMaps"; 

    if (apiKey){ 
    script.src = 'http://maps.google.com/maps/api/js?key=' + apiKey + '&callback=mapInit'; 
    } 
    else{ 
    script.src = 'http://maps.google.com/maps/api/js?callback=mapInit'; 
    } 
    document.body.appendChild(script); 
} 

をあなたはまた、参照することができますhttps://www.joshmorony.com/part-3-advanced-google-maps-integration-with-ionic-and-remote-data/

関連する問題