地図蔵 ▷ 2012年までの記事「Marker: new GIcon 復習」

Marker: new GIcon 復習

(2008年3月12日)

オリジナルのアイコンで Google マップに個性を。そのおさらい。

たとえば Illustrator で線を引き、フィルタで手形の矢印を作って PSD に書き出して、

mano1 mano2

さらに Photoshop で寸法を整えたり加工したりして、GIF や JPG でなく PNG24 に書き出すと。

この例のアイコン画像の場合、サイズは幅36ピクセル、高さ80ピクセルなので、

iconSize = new GSize(36, 80);

という指定(「でかすぎ。」という声が聞こえるが、わざと巨大にした)。

mano5 mano4

ポイントの位置(画像では警視庁屋上ヘリポートの「H」中心)が iconAnchor。
このアイコン画像の場合、人差し指の先端が左下なので、

iconAnchor = new GPoint(4, 80);

左上カドから右へ4ピクセル、下へ80ピクセルの位置・・・としてみる。
そしてフキダシ(infoWindow)の指す尖った先端の位置が infoWindowAnchor。
たとえば手首の右端に指示してみる。

infoWindowAnchor = new GPoint(32, 1);

左上カドから右へ32ピクセル、下へ1ピクセルの位置、というふうな設定。

つまりアイコンの形や用途次第で、右や左、上や下に、好き勝手に工夫できるというあんばい。

アイコンにもシャドウがないとイヤ! なら、icon.shadowSize = new GSize(**, **); とか書くように。とグーグルのリファレンスは言ってます。
参考:テイクアウト用

mano  arrow  a-cup  b-cup  c-cup  rightbox  box  こちらにも少し。