markerclustererがちゃんと動いてなかったので対策してみた
前々からちょっと不安だったのだが、とうとうmarkerclusterer_compiled.jsが死んだ。
これはGoogle mapの上の重なっているポイントアイコンをマーカーでまとめて見やすくしてくれるすばらしいスクリプトライブラリだったのだが、APIの変更でもあったのか今日見たら動いていなかった。
いや正確には動いてはいる。動いてはいるのだがマーカーアイコン画像が表示されない。数字しか表示されていない。
見た目上なんともさびしい感じになってしまっている。数字は出てくるのだがあの赤とか黄色とかのマークがない。悲しい。
原因(経緯)
で、「markerclusterer」で検索していたらこんな会話を発見。
Since google code is shutting down, google has moved their utility library from Google Code to github:
Images urls pointing to their old library no longer work, and will have to be changed, e.g.:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m2.png
to
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.pngAlthough ideally there should be an option to let the user self-host them so this doesn’t happen again.
ふむ。Googleさんがこれまで公開してたユーティリティーライブラリを閉鎖して、その中身をGoogle codeからgithubに移動した的なことが書いてある。
それであのアイコン画像が呼び出せなかったのか。githubにアップしたのがGoogle本家なのかはさておき(ユーザーコンテンツ扱いになってる。未確認)、とりあえずあのアイコン画像はたしかにあった。
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m1.png
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.png
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m3.png
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m4.png
https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m5.png
アイコンのデータ自体は残っている。よかった。
対策法
この表示を元に戻すにはさっきのURLから画像をダウンロードして自分の管理するサーバーにアップ、そのURLをこれまで指定いたGoogleのURLの代わりに指定すればOK。わりと簡単。
手順
さっきのhttps://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m～で連番になっている画像をDL。全部で5つ。
これらの画像を自分が管理するサーバーにアップ。例えばhttp://○○○.com/image/googlemap/にアップしたとする。これでhttp://○○○.com/image/googlemap/m1.png～http://○○○.com/image/googlemap/m5.pngにアクセスすればマーカーアイコンが表示される状態になった。
そして今までmarkerclusterer_compiled.jsとかテンプレートのimagePath部で「http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/images/m～」と指定していた部分を「http://○○○.com/image/googlemap/m～」に置き換える。
これで対策完了。
直りました。
ただ転送容量を食うのだけはちょっと問題。100KBにも満たない小さなサイズだけどなにせ用途が用途だけにどこのサイトもこのファイルへのアクセス回数は半端ではないはず。これを自社サーバーでなんとかするというのは困るという人もいるかもしれない。
でもgithubのimgリンクを直で指定するのはいろいろマズいしここは仕方ないところかなぁ。(さっきの英文でもセルフホスティングするべき的なこと言ってたしね)