GoogleMapsAPIで使うマーカーをブリンクしてみた

Tweet

（ブリンクとは言っても青くはないので注意）

GoogleMapAPIでものすごい多くMarkerがあった場合、GMarkerManagerとかMarkerManagerとか使って、拡大率によって表示されたりされなかったりを制御できるっていうのはいいんですが、むしろ全部表示してもいいから、特定のMarkerを目立たせろっていうミッション。

これを、この3日間ラブプラスやっていた僕はラブプラスの左側のステータス表示でいちいちハートがでっかくなったり小さくなったりしている効果に気付きまして、それをまねてやってみました。

▲効果てきめん

単純に、Markerとして指定する画像ファイルを、アニメーションPNGにしただけです。アニメーションGIFじゃないのは、フリンジが出ちゃうからです。

そんで、アニメーションPNGはまだ普及していないので、もしかしたら見られないブラウザもある。ここにアニメーションPNGのMarker画像貼るので見られるかどうか見てください。

これを作るには、FirefoxのAPNG Editorという機能拡張を使う。あらかじめそれぞれのフレームのPNGを書き出しておいて、APNG Editorで合成するよ。

▲簡単です

うちでテストしたところ、APNGは、Opera10とFirefox3で機能しました。後方互換として、対応していないブラウザだと1フレーム目が表示されるとのことなので、影響が少ない程度にアニメーションさせたアイコンを置いてみるのもいいかと思います。

問題は、GoogleMapsの上に置くMarkerの画像って、なかなかしっくりくるものがないってことなんだと思います。

2009.10.12 22:37 投稿　大野 義貴 [Web] | 固定リンク |