Bootstrapを利用していて印刷時にGoogleマップが潰れてしまうとき

harada 358views 更新:2015年9月8日

表示は正常なのに、印刷プレビューを表示するとGoogleマップが潰れてしまう、表示されないというときはBootstrapが原因かもしれません。

具体的にはBootstrap.cssの以下のコードが作用してしまっているようです。

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

そのためGoogleマップを利用している場合はこのスタイルを打ち消す必要があります。
以下のようなCSS を適用することで解消されました。

.google-maps img {
  max-width: none !important;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません