googlemap マーカーグラフィック作成

googlemapの標準マーカーは赤い噴出しだが、このマーカーは自分で作成したものを利用できる。
作成方法は簡単で32bitのαチャンネル付きのPNG形式で保存すればOKである。アイコンを作った事のある者だったら、マスク版がどうだとか、パレットがどうの・・、と考えがちだか、何も気にする必要はない。
マップ内に表示するためには、32bitのαチャンネル付きのPNGで良いが、IEはPNGのαチャンネルをサポートしていない。同じ画像をブラウ内に直接表示すると透明部分が薄いブルーグレーで表示されてしまうので注意が必要だ。
※PNGには基本的に32bitと言うのが無いらしく、Fireworksではαチャンネル付きの24bit色PNGを32bitと呼んでいるようです。他のソフトでどの様な設定なのか未確認です。
※IEでPNGのαチャンネルをサポートするにはAlphaImageLoaderを利用しなければなりません。詳しくはこちらで。googlemap内での表示には必要ありません。

私の使っているFireworksで手順を紹介してみる。

1.アイコンは任意のサイズ。
前景と影を一つのファイルでレイヤー分けして作成し、“レイヤーをファイルに変換”で書き出します。このとき前景と影の位置あわせを簡単にするために、“イメージを切り抜き”のチェックを外し、同じキャンバスサイズで書き出します。
2.Fireworksではキャンバスの色指定を“なし”透明に指定。
マーカーアイコンの呼出しスクリプトは必須のものを記します。
この中でiconAnchorは座標の原点なのでアイコンの足元に設定。
保存形式（最適化）はアイコン、影アイコンとも共通のPNG32です。
3.影アイコンの作成は基のアイコンを融合して黒に塗り、エッジを3ピクセル程ぼかします。
大切なことは塗りの透過度を50%程度にすることでしょう。
こうしないと、真っ黒の影になります。
4.斜めにしないと見えないし、影らしくないので、変形ツールで適当に変形します。
あとは書き出してサーバーにアップしてください。