google map 印刷時バグの対策・解決策

こんにちは。そらまめです。

本日も以前の印刷用CSSに続いて、WEB関連のお話です。

印刷用CSSについてはこちらをご覧ください。

印刷用CSS printCSS の改行や背景について

google map を使ってサービスってたくさんあるんですが、

web view では問題なくても、

印刷時に途切れたり、ページを跨いだりということがあります。

そんな中、今回はなぜか chrome や safari ブラウザで google map を横印刷すると、

謎の帯?余白?が出てしまうバグと遭遇したので、

そのお話とバグ回避についてお話しします。

google map 印刷時に出る帯・余白のバグが起こる条件とは

まず、今回の印刷時に帯のような余白のようなものがでる再現パターンは下記になります。

  • google map API を使用しての埋め込み
  • chrome や safari ブラウザで横印刷時
  • 特定のgoogle map サイズ

google map API を使用しての埋め込み

今回の場合、google map の ifreme ではなく、 API を使用しての埋め込み時に起きました。

ifreme 使用時には起きなかったのですが、 google map API を使用すると起きるという現象でした。

chrome や safari ブラウザで横印刷時

また、再現の状況としては、 chrome や safari ブラウザで起きており、

IE や  Edge などでは 帯や余白はないものの、

ページをまたがったり、他要素に被ったりと

これはこれでバグが起きていました。

特定のgoogle map サイズ

サイズが特定の場合、再現することはないのですが、

それ以外のサイズではこのバグは発生し、

発生率もそれなりに高いものなのかなと思います。

他に再現してる人はいるのか?

このバグに直面して、まずは回避策や解消策がないかググります。

基本、この手のものはググれば出てきます。w

ググると出てくるのかこの辺り

埋め込んだグーグルマップで印刷時、横を指定すると帯がでる
Google Maps JavaScript API で埋め込まれた地図を、横方向で印刷しようとすると、ある部分で横に白い帯が出て上下に地図が続かない。
ブラウザで普通に見るのは問題がないが、印刷プレビューで帯が発生し、印刷するとプレビューの通り帯がでる。縦印刷は問題なし。

Google マップ ヘルプ フォーラム

これはフォーラムと言われるもので、いわゆるその手の有識者同士が問題などがあった時に解決策を検討したり、

アドバイスしたりという掲示板のようなものですかね。

ここに出てくる時点で、まあそれなりのバグかなとは思います。

この時、確かにこれと同じ症状だったのですが、

残念ならがら上記のフォーラムでは私の実装する内容での解決策はありませんでした。

また、フォーラムでは縦印刷は問題なしとありましたが、

私の場合、縦印刷でも帯・余白のようなものが出ることはありました。

さらには、teratailでも質問がされていました。

Google mapを印刷する時、地図が欠ける
地図を印刷して来られる方がいるのですが、地図を印刷する際に地図の一部分が欠ける(グレーになる)と指摘を受けました。
確認してみるとChromeで印刷する時にどうやら発生するようで下数%がグレーになっていました。

ITエンジニア特化型Q&Aサイトteratail

こちらは、teratailというサイトで、

基本的にはエンジニア特化のQAサイトですね。

この質問は2016年にされていますが、未だ回答がついていないという状態ですね。

このように、再現してる人はいますし、

実装者としてはブラウザや印刷レンダリングでのバグなので、

「ようわからん!!」というのが正直なところで頭を抱えることも多々ある話です。

google map 印刷時に出る帯・余白のバグを回避・解消する方法

今回、実装するなかでバグの調査をしつつ、回避、解消策を模索していました。

一つは、特定のサイズにして対応させることでバグが起きないようにということも考えましたが、

特定サイズの場合、印刷時にページがまたがってしまうなどの問題もあり、

根本的な回避、解決にはなりませんでした。

そんな中、調査をしてると海外のフォーラムを見つけました。

書かれている内容は私が直面した内容と同一のものでした。

その中で回避策として上がっていたのは、

#map_canvas div > img {
  position: absolute;
}

google map api を使った地図描画は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?

という一文もあったので、これで完璧に問題ないとは言い切れないかもしれません。

本来はgoolge map apiが問題なく動作してくれれば、こういった対応もしなくて済むのですが、

goolge も 人の子が作ったサービス達なので、

こういったバグは出てくることはありますね。

出てきた時に、対処方法が本当にないのかを深掘りすることが大事なんだと思います。

もし、google map apiで同じようなことに直面してる人がいたら参考にしてみてください。