株式会社トルクスでは、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″というキーワードで、期間を最近１ヶ月にして検索して見つけたのが次の情報です。
まさに同じような情報！
根本解決にはいたっていませんが、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]
↓これはかなり面白そう！マピオンの書いた地図システムの作り方！
Mapion・日本一の地図システムの作り方 (Software Design plus)
著者／訳者：株式会社マピオン 山岸 靖典 谷内 栄樹 本城 博昭 長谷川 行雄 中村 和也 松浦 慎平 佐藤 亜矢子
出版社：技術評論社( 2012-09-28 )
定価：￥ 2,786
Amazon価格：￥ 2,786
大型本 ( 256 ページ )
ISBN-10 : 4774153257
ISBN-13 : 9784774153254
↓こういう脳内情報を外に出す技術ってなかなか面白いし、実はすごいんじゃない！？
著者／訳者：一刀
出版社：技術評論社( 2004-09 )
定価：￥ 1,166
Amazon価格：￥ 1,166
単行本 ( 126 ページ )
ISBN-10 : 4774121258
ISBN-13 : 9784774121253
