地図蔵 ▷ 2012年までの記事「Google Maps(API v3)のアイコン」

Google Maps(API v3)のアイコン

(2012年2月24日)

グーグル・マップで独自に複数のアイコンを使う場合、javascript で Array() 配列を使うのが常套手段ではある。以下のようにあらかじめアイコン画像を指定するのだが;

var icon = Array();
 icon[0] = "./image/jp.png";
 icon[1] = "./image/in.png";
 icon[2] = "./image/id.png";
 .....

たとえば、世界の国旗をカスタム・アイコンにしようとすれば、195か国ぶんの画像の記述が必要になる。
いちいち明示するのがメンドウだ......という横着な発想に至るのは私だけではないと思うが如何か。

world-icon

画像は famfamfam.com の Flag を使う。PNG ファイル名に ISO 3166-1 alpha-2 が使われている。

it.png jp.png us.png gb.png fr.png cl.png

これ(日本なら jp.png、米国なら us.png など)によって識別すればよい。

XML は、例えば Attribute の code 部分に「△△.png」ファイル名をあてがっておいて;

<marker lat="35.710838" lng="139.658203" html="Japan" label="日本" code="jp"/>
<marker lat="24.686952" lng="76.992188" html="India" label="インド" code="in"/>
<marker lat="36.385913" lng="127.705078" html="Korea" label="韓国" code="kr"/>
.....

javascript では;

var icoimg = new google.maps.MarkerImage("./image/" + code + ".png",
 new google.maps.Size(16,11),
 new google.maps.Point(0, 0),
 new google.maps.Point(8, 5)
);

と、カンタンに片付けて仕舞う。

できあがり: せかいのくに Redux

速度などパフォーマンス的には劣ると(理屈の上では)想像される。けれども、体感的には差異がないので気にするまい。