株式会社トルクスでは、GPS情報などを使って近くのリラクサロンを探せるポータルサイト「relaxin’ リラクシン」を提供しています。
「リラクシン」では、店舗情報を地図上に表示するためにGoogle Maps JavaScript API v3を使っているのですが、先日から何故かChromeで見るとボケて表示されてしまう現象が発生していました。
今回のエントリはその対処方法について、です。
(↑クリックして等倍で見てください)
実は、、
このパラグラフは読み飛ばしてもらって結構ですが、実は、「リラクシン」のリリース時にも同様のバグが発生していました。
その時にも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に関するリンク集
[AD]
↓これはかなり面白そう!マピオンの書いた地図システムの作り方!
アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。
↓こういう脳内情報を外に出す技術ってなかなか面白いし、実はすごいんじゃない!?
著者/訳者:一刀
出版社:技術評論社( 2004-09 )
定価:
Amazon価格:¥ 1,166
単行本 ( 126 ページ )
ISBN-10 : 4774121258
ISBN-13 : 9784774121253