Google Map tela è sempre vuoto quando si stampa (Ctrl + P)

Question

sto cercando di stampare la vista mappa di Google che si trova all'interno di un pannello di bootstrap come di seguito:

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

sto cercando di stampare in un modo semplice, basta premere CTRL + P. Ma nella casella di visualizzazione della stampa, la mappa è vuota. Cosa potrebbe accadere?

Alcune immagini:

Alla pagina

At dialogo di stampa

Answer 1

rimuovendo selettivamente varie linee dalle @media print sezioni del Bootstrap CSS ho scoperto che la mia mappa ritorna quando rimuovo la linea img {max-width...}:

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

Potete anche ignorare gli effetti di questa (vs rimozione dal codice BS) aggiungendo il seguente da qualche parte sotto bootstrap in cui è stato importato:

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

Nota che sto usando Sass nei precedenti esempi di codice; Sono su un progetto Rails, quindi sto guardando il codice BS tramite la gemma bootstrap-sass. Il CSS equivalente di Less o vanilla dovrebbe essere facile da ottenere.

Ancora molto lavoro su questo per vedere se è davvero una soluzione e/o se questo cambiamento ha danni collaterali ... potrebbe voler isolare questo allo div contenente la tua mappa o qualcosa del genere.

MODIFICA: Sembra che questa riga provenga effettivamente dal codice preso dal progetto HTML5Boilerplate, incluso in Bootstrap. Ho creato una pagina demo minimale e lo opened an issue su questo nel progetto H5BP.

Aggiornamento 21 luglio 2016: la correzione per questo è slated for inclusion with BS 4.

Answer 2

La larghezza della tela era troppo grande. Ho fissato un limite e ha funzionato.