Document.readystate lügt über geladene Google Maps-Canvas-Bilder

Question

Ich drucke eine Seite mit Google Maps API v3 Karte aus einem Iframe. Ich habe den folgenden Code implementiert, um sicherzustellen, dass die Seite vollständig geladen wurde, bevor der Iframe gedruckt wird.

/** 
* 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); 

    } 
    } 

}

Aber auch bei einer 500 Millisekunden Verzögerung nach document.readystate === 'complete' ist wahr, oft mal die Seite gedruckt mit einer grauen/leerer Google Maps Leinwand, ohne Bilder.

Wenn ich window.print() erneut drücke, ohne die Seite neu zu laden, wird der iframe wie erwartet mit allen Kartenbildern gedruckt. Also liegt der Dokumentbereitschaftszustand vor.

Was kann ich tun, diese zu lösen neben der Verzögerung zu erhöhen sogar noch länger (was ich will nicht zu tun, wie es Menschen straft lange zu warten, wenn die Inhalte schnell geladen)

Answer 1

Die Antwort war einfach, benutzen Sie einfach Google Maps-Event-Handler-API In meinen Tests feuert es bounds_changed, dann tilesloaded und schließlich idle in dieser Reihenfolge. Also habe ich einfach eine Flagge gesetzt, um später nach dem idle Event zu suchen und es funktioniert perfekt.

 // 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); 
     });