マルティスープ
Staff Blog

2017.10.05

Googleマップを印刷しようとすると表示されない！？

みなさん、こんにちは！

以前、Google Maps APIs プレミアムプランをご購入いただいたお客さまから、以下のような問い合わせがありました。

”Google マップを印刷プレビューすると表示されない”

お客さまの状況は以下のようです。

・Google Maps JavaScript API を使って地図を表示している

・地図の表示自体は問題なくできている

・デザインは、Bootstrap を使用している

色々調べたところ、Bootstrap が悪さをしていることが判明しました。

原因

以下のCSSが適用されてしまっているようです。@media print は印刷時のみ適用されるCSSです。

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

解決策

以下のように「max-width: none」を強制的に指定します。

.gm-style img {
  max-width: none !important;
}

たったこれだけの内容ですが、非常に感謝された次第です。

弊社では、プレミアムプランをご購入いただいたお客さまには、専任のスタッフが技術サポートを行っています。なお、スタッフは定期的に Google社の教育を受講し、日々スキルアップを図っていますのでご安心ください！！ プレミアムプランの詳細は、以下のページに記載しています。

Google Maps API プレミアムプランについて

今後も本ブログを通じて、Google Maps APIs の技術的なことや地図にまつわる開発について書いていきたいと思います。こういうこと書いて欲しいという要望がありましたら、問い合わせフォームよりお送りください。

がんばります＾＾