Googleマップのキャンバスは空白になっている

Question

私はちょうど下記のようなブートストラップ・パネル内でのGoogleマップのキャンバスに印刷しようとしている：私はで印刷しようとしている

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

を簡単な方法で、CTRL + Pを押すだけです。しかし、印刷視覚化ボックスでは、地図は空白です。何が起こっているのでしょうか？

いくつかの画像：プリントボックスでページで

Answer 1

選択私はimg {max-width...}行を削除すると、私のマップが戻ってくることを発見したブートストラップCSSの@media printセクションからさまざまな行を除去することにより：

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

ます。また、この効果を上書きすることができます追加することにより、（BSコードから削除VS）あなたがインポートしたブートストラップの下のどこかに、以下：

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

上記のコードサンプルでSassを使用しています。私はRailsプロジェクトにいるので、bootstrap-sass gemでBSコードを調べています。同等のLessまたはバニラCSSは簡単に達成できるはずです。

これは本当に修正されているか、この変更に付随する損傷があるかどうかを確認するために非常に多くの作業を行っています...マップを含むdivにこれを分離したい場合があります。

編集：この行は実際にはブートストラップに含まれているHTML5Boilerplateプロジェクトから取得したコードからのものです。私はH5BPプロジェクトでこれについて最小のデモページとopened an issueを作成しました。

更新日2016年7月21日：この修正はslated for inclusion with BS 4です。

Answer 2

キャンバスの幅が大きすぎました。私は限界を設定し、それは働いた。