Google Map Leinwand wird immer leer, wenn das Drucken (Strg + P)

Question

Ich versuche, die Google-Karte Leinwand zu drucken, wie unten in einem Bootstrap-Panel ist:

<div class="panel panel-default"> 
    <div class="panel-body"> 
     <div id="map">...</div> 
    </div> 
</div> 

Ich versuche, zu drucken, Ein einfacher Weg, einfach CTRL + P drücken. In der Druckvisualisierungsbox ist die Karte jedoch leer. Was könnte passieren?

Einige Bilder:

Auf Seite

Bei Printbox

Answer 1

Durch selektives verschiedene Linien von den @media print Abschnitten des Bootstrap CSS Entfernen ich entdeckt habe, dass meine Karte kommt zurück, wenn ich die img {max-width...} Linie entfernen:

@media print { //...there's other stuff above here img { max-width: 100% !important; } //...there's other stuff below here }

Sie können auch die Auswirkungen dieser außer Kraft setzen (vs vom BS-Code zu entfernen) durch die Zugabe von folgenden irgendwo unten, wo Sie importiert Bootstrap haben:

@media print { img { max-width: none !important; } }

Beachten Sie, dass ich Sass in den obigen Codebeispielen verwende; Ich bin auf einem Rails-Projekt, also schaue ich den BS-Code über das bootstrap-sass Juwel. Das entsprechende Less- oder Vanilla-CSS sollte einfach zu erreichen sein.

Sehr viel Arbeit daran, um zu sehen, ob es wirklich eine Reparatur ist und/oder wenn diese Änderung Kollateralschaden hat ... Vielleicht möchten Sie diese auf die div mit Ihrer Karte oder etwas zu isolieren.

EDIT: Sieht so aus, als käme diese Zeile tatsächlich aus dem Code aus dem HTML5Boilerplate-Projekt, das in Bootstrap enthalten ist. Ich habe eine minimale Demo-Seite und opened an issue darüber auf dem H5BP-Projekt erstellt.

Update 21 Jul 2016: Die Lösung dafür ist slated for inclusion with BS 4.

Answer 2

Die Breite der Leinwand war zu groß. Ich habe ein Limit gesetzt und es hat funktioniert.