Document.readystate가로드중인 Google지도 캔버스 이미지에 대해 거짓말입니다

Question

iframe 내에서 Google지도 API v3지도가 포함 된 페이지를 인쇄하고 있습니다. iframe을 인쇄하기 전에 페이지가 완전히로드되었는지 확인하기 위해 다음 코드를 구현했습니다. 심지어 document.readystate === 'complete' 후 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); 

    } 
    } 

} 그러나

은, 아니 이미지 빈/회색 구글지도 캔버스와 종종 페이지 인쇄, 사실이다.

페이지를 다시로드하지 않고 window.print()를 다시 실행하면 예상대로 모든 맵 이미지가있는 iframe이 인쇄됩니다. 문서 준비 상태가 거짓말입니다.

나는 지연을 증가 외에이 문제를 해결하기 위해 할 수있는 일 더 오래

Answer 1

대답은 간단했다 단지 사용 (신속 컨텐츠로드 할 때 오래 기다릴 사람을 처벌로 내가 원하는하지 않는) Google지도 이벤트 처리기 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); 
     });