Google Maps JavaScript API v3がChromeでボケる問題と対応

Filed under Google, ウェブサービス
Tagged as , ,

株式会社トルクスでは、GPS情報などを使って近くのリラクサロンを探せるポータルサイト「relaxin’ リラクシン」を提供しています。
「リラクシン」では、店舗情報を地図上に表示するためにGoogle Maps JavaScript API v3を使っているのですが、先日から何故かChromeで見るとボケて表示されてしまう現象が発生していました。
今回のエントリはその対処方法について、です。
blurry google maps
(↑クリックして等倍で見てください)

実は、、

このパラグラフは読み飛ばしてもらって結構ですが、実は、「リラクシン」のリリース時にも同様のバグが発生していました。
その時にもChromeのみで発生していました。(同じWebKitのSafariでは問題なかった!)
いろいろとchromeのデバッガツールで調査していたら、Twitterの公式ウィジェットの3D関連のCSSと相性が悪いことが判明したので、Twitter公式ウィジェットを使うのをやめた経緯があります。
これは覚書ですが、その問題を引き起こしたTwitterウィジェットのcssは、-webkit-transform:translate3d(0, 0, 0); というようなコードで、基本的にこれでボケるのはブラウザの浮動少数演算の誤差バグで、Twitterは悪くない!実際Safariでは問題発生しないし!と憤慨していました。
まぁ、それはさておき、今回の問題はまたちょっと違うものでした。

同志を探して解決!

今回もChromeのみで発生していたので、前回と同じような現象かと想像していたのですが、若干違っているようで、怪しいDOM要素を消してもGoogle Mapsの表示はボケたまま。
これは怪しいなぁ、と、”blur google maps v3″というキーワードで、期間を最近1ヶ月にして検索して見つけたのが次の情報です。

まさに同じような情報!
根本解決にはいたっていませんが、Google Mapsで呼び出すAPIのバージョンを指定できるので、それでAPIのバージョンを3.5を指定したら直った!と書いてあります。
下記のように呼び出しパラメータを追加することでバージョンを指定できるようです。

1
http://maps.google.com/maps/api/js?v=3.8&sensor=false

これを参考に、自分の環境でテストしてみたら、「3.8でOK、3.9でNG」という結果になりました。
最新バージョンを追いかける理由はあまりないので、とりあえず3.8で固定のまま運営していきたいと思います。

Google Maps APIに関するリンク集

にほんブログ村 IT技術ブログ IT技術メモへ

[AD]

↓これはかなり面白そう!マピオンの書いた地図システムの作り方!

Mapion・日本一の地図システムの作り方 (Software Design plus)

著者/訳者:株式会社マピオン 山岸 靖典 谷内 栄樹 本城 博昭 長谷川 行雄 中村 和也 松浦 慎平 佐藤 亜矢子

出版社:技術評論社( 2012-09-28 )

定価:¥ 2,786

Amazon価格:¥ 2,786

大型本 ( 256 ページ )

ISBN-10 : 4774153257

ISBN-13 : 9784774153254


↓こういう脳内情報を外に出す技術ってなかなか面白いし、実はすごいんじゃない!?

バカ日本地図―全国のバカが考えた脳内列島MAP

著者/訳者:一刀

出版社:技術評論社( 2004-09 )

定価:¥ 1,166

Amazon価格:¥ 1,166

単行本 ( 126 ページ )

ISBN-10 : 4774121258

ISBN-13 : 9784774121253


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)