当サイトで生成している RSS(野良feed):

dtpwiki.jpで提供しているサービス:

| トップページ |

2009.10.12

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

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

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

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

Googlemapblink
▲効果てきめん

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

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

Markeranimation

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

Markeranimation02
▲簡単です

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

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

2009.10.12 午後 10:37 [Web] |

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/19018/46469843

この記事へのトラックバック一覧です: GoogleMapsAPIで使うマーカーをブリンクしてみた:

» アニメーションPNG from InDesign居残り補習室
アニメーションGIFは有名だけど、アニメーションPNGはまだまだ普及してない。 APNGを表示できるブラウザも限られているらしい。 CLさんがAPNGを作... 続きを読む

受信: 2009/10/14 8:50:48

コメント

FF3 と IE8 で確認しました。
きちんと動いてます。

投稿者: いき♂ (2009/10/13 12:19:33)

確認していただき感謝。これ意外とSafariだめなんですよね。残念です。

投稿者: CL (2009/10/14 2:07:20)

ていうか、IE8だめなはずなんですが。

投稿者: CL (2009/10/14 2:10:46)

コメントを書く