目次
・GoogleMaps印刷時に出る帯or余白のバグが起こる条件とは
・バグ内容について
・GoogleMaps印刷時に出る帯or余白のバグを回避解消する方法
GoogleMaps印刷時に出る帯or余白のバグが起こる条件とは
まず、今回の印刷時に帯のような余白のようなものがでる再現パターンは下記になります。
GoogleMapsAPIを使用しての埋め込み
今回の場合、google map の ifreme ではなく、 API を使用しての埋め込み時に起きました。
ifreme 使用時には起きなかったのですが、 google map API を使用すると起きるという現象でした。
chromeやsafariブラウザで横印刷時
また、再現の状況としては、 chromeやsafari ブラウザで起きており、
IEやEdgeなどでは帯や余白はないものの、
ページをまたがったり、他要素に被ったりと
これはこれでバグが起きていました。
特定のGoogleMapsサイズ
サイズが特定の場合、再現することはないのですが、
それ以外のサイズではこのバグは発生し、
発生率もそれなりに高いものなのかなと思います。
バグ内容について
埋め込んだグーグルマップで印刷時、横を指定すると帯がでる
Google Maps JavaScript API で埋め込まれた地図を、横方向で印刷しようとすると、ある部分で横に白い帯が出て上下に地図が続かない。
ブラウザで普通に見るのは問題がないが、印刷プレビューで帯が発生し、印刷するとプレビューの通り帯がでる。縦印刷は問題なし。
確かにこれと同じ症状だったのですが、
残念ならがら上記のフォーラムでは私の実装する内容での解決策はありませんでした。
フォーラムでは縦印刷は問題なしとありましたが、
私の場合、縦印刷でも帯・余白のようなものが出ることはありました。
また、teratailでも質問がされていました。
Google mapを印刷する時、地図が欠ける
Google mapを印刷する時、地図が欠ける
地図を印刷して来られる方がいるのですが、地図を印刷する際に地図の一部分が欠ける(グレーになる)と指摘を受けました。
確認してみるとChromeで印刷する時にどうやら発生するようで下数%がグレーになっていました。
GoogleMaps印刷時に出る帯or余白のバグを回避解消する方法
今回、実装する中でバグの調査をしつつ、回避、解消策を模索していました。
一つは、特定のサイズにして対応させることでバグが起きないようにということも考えましたが、
特定サイズの場合、印刷時にページがまたがってしまうなどの問題もあり、根本的な回避、解決にはならないため他の解決策を探りました。
そんな中海外フォーラムで見つけた内容が、私が直面した内容と同一のものでした。
その中で回避策として上がっていたのは、
#map_canvas div > img {
position: absolute;
}
GoogleMapsAPIを使った地図描画はimg画像を256×256に分割した画像をタイル式に並べて描画しています。
そのimg画像にpositionをつけるというものでした。
この内容でも私が直面した問題は回避はできましたし、
.gm-style div > img {
position: absolute;
}
という内容でも回避はできました。
Missing tiles when printing Google Maps API v3
コメントではこのようなことも書かれていました。
The position: absolute; workaround is not a reliable solution.
I am displaying a map with a polygon drawn via KML data and the position: absolute; style causes the polygon to be seriously misaligned when you zoom out.
Any alternate workarounds?
google 翻訳
位置：絶対;回避策は信頼できるソリューションではありません。
KMLデータを介して描画されたポリゴンと位置のマップを表示しています：絶対;スタイルを使用すると、ズームアウトしたときにポリゴンが大きくずれます。
別の回避策はありますか？
という一文もあったので、これで完璧に問題ないとは言い切れないかもしれません。
しかし、現状上記の対応によりバグは解消しており、印刷時の不具合を解消することができました。
もし、GoogleMapsAPIで同じようなことに直面してる人がいたら参考にしてみてください。