Document.readystateはGoogle Mapsのキャンバス画像が読み込まれていることについて横たわっています

Question

iframe内からGoogleマップAPI v3マップを含むページを印刷しています。 iframeを印刷する前にページが完全に読み込まれていることを確認するために、次のコードを実装しました。 document.readystate === 'complete' AFTER 500ミリ秒の遅延を有すると

/** 
* Auto print the page once the full document has finished loading 
*/ 
function checkDocumentStateChange(documentElement) { 

    var document = documentElement; 
    console.log('Document ReadyState: ' + document.readyState); 
    document.onreadystatechange = function() { 

    console.log('Document ReadyState: ' + document.readyState); 

    if (document.readyState === 'complete') { 
     console.log("Document fully loaded!"); 
     console.log("Printing report from within iframe"); 
     setTimeout(function() { 
      window.print(); 

      var requestOrigin = '@viewModel.RequestOrigin'; 
      if(!!requestOrigin) { 
       // Tell the parent window that the print has occurred, so it can prepare to cleanup and remove this iframe 
       console.log("Send postMessage: secret"); 
       parent.postMessage('secret', requestOrigin); 
      } 
     }, 500); 

    } 
    } 

}ただし

はない画像とブランク/グレーのGoogleマップキャンバスとしばしばページプリントを、真です。

ページを再読み込みせずに再度window.print（）を実行すると、すべてのマップイメージを含むiframeが期待どおりに印刷されます。したがって、文書準備完了状態は横たわっています。

私は（私はそれが時にすぐにコンテンツのロード長く待つ人々を罰するとして行うにはしたくないもの）も、長い遅延が増加するほか、これを解決するために何ができる

Answer 1

答えは簡単だった、ちょうど使用Google MapsのイベントハンドラAPI。私のテストでは、それはbounds_changed、次にtilesloaded、そして最後にidleという順に発生します。だから私はちょうどidleイベントに後でチェックするためのフラグを設定し、それは完全に動作します。

 // this callback runs when the mapobject is created and rendered (because bound_changed fires at initialization), only fire it once to prevent unnecessary callbacks during panning/zooming 
     google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
     // do something only the first time the map is loaded 
     console.log("Google Maps event: bounds_changed"); 
     }); 

     // this callback runs when the mapobject is shown for the first time and all tiles are loaded 
     google.maps.event.addListener(map, 'tilesloaded', function() { 
     console.log("Google Maps event: tilesloaded"); 
     }); 

     // this callback runs when the mapobject is fully created and rendered and the map is completely idle 
     google.maps.event.addListener(map, 'idle', function() { 
     // do something only the first time the map is loaded 
     console.log("Google Maps event: idle"); 
     mapReadyToPrint = true; 
     console.log("mapReadyToPrint:", mapReadyToPrint); 
     });