ルート案内機能がついて、ますます便利になったグーグルマップ。使っている人もたくさんいるでしょう。
グーグルマップはAPIが公開されているので、自分のページに組み込んだりして使っている人もいるかと思います。
そのグーグルマップに表示されるピン＝マーカーですが、赤色と決まっていて自由な色にすることができません。自由な色や形状にするカスタムマーカーの機能がありますが、作るのも面倒くさい人もいるはずです。
デフォルトのマーカーはG_DEFAULT_ICON.imageにマーカー画像のURLが入っており、ここを変更するだけで自由なマーカーを表示することができます。
そこで、Photoshopを使って、あらかじめ色が異なるマーカーを大量に作成してしまおうというのが今回のネタです。ネタとしては、かなりの力わざですが・・・。
作成した色違いのマーカー画像をサーバーに用意しておけばG_DEFAULT_ICON.imageにURL+カラーコードを指定するだけで使えるという手軽さです。なお、カラーコードはスタイルシートのfeaなど3桁で指定するものとし先頭には16進数であることを示す0xをつけます。
●サンプル（一部のみ抜粋）
var marker = new GMarker(new GLatLng(38,138));
G_DEFAULT_ICON.image = "http://www.openspc2.org/Google/Maps/marker/color/0x"+"f0f"+".png";
map.addOverlay(marker);
マーカー画像はPNG形式になっていますが、一旦PSD形式で保存し後からバッチ処理でPNG形式に変換するものとします。
まず、マーカー画像の元ファイルを用意します。以下のようにレイヤーとアルファチャンネルを設定します。
●Photoshopのレイヤー構成
レイヤー１（ここは乗算モードにしアクティブにした状態で保存）
レイヤー０（マーカーのイラスト。通所のモード）
------------
アルファチャンネルRGB
アルファチャンネル レッド
アルファチャンネル グリーン
アルファチャンネル ブルー
アルファチャンネル1（ここにマスクを作成しておく。色を変更する部分を白に）
------------
作成したらホームフォルダにdefault.psdという名前で保存します。ホームフォルダにmarkerという名前のフォルダを作成してから以下のスクリプトを実行します。
16×16×16個、つまり4096個の色違いのマーカーを作成するので結構時間がかかります。食事前か寝る前に実行させておきましょう。
無事にマーカーが作成できたらバッチ処理でPNG形式に変換しサーバーにアップロードすればできあがりです。
これで色違いのマーカーを手軽に使うことができます。
(function(){
var colObj = new SolidColor();
for (var R=0; R<256; R+=16) {
for (var G=0; G<256; G+=16){
for (var B=0; B<256; B+=16){
open(new File("~/default.psd"));
colObj.rgb.red = R;
colObj.rgb.green = G;
colObj.rgb.blue = B;
var chObj = activeDocument.channels[3];
activeDocument.selection.load(chObj);
activeDocument.selection.fill(colObj,ColorBlendMode.NORMAL, 100, false);
var RR = "00"+R.toString(16);
var GG = "00"+G.toString(16);
var BB = "00"+B.toString(16);
var Rstr = RR.substring(RR.length-2, RR.length-1);
var Gstr = GG.substring(GG.length-2, GG.length-1);
var Bstr = BB.substring(BB.length-2, BB.length-1);
var fileObj = new File("~/marker/"+"0x"+Rstr+Gstr+Bstr+".psd");
activeDocument.saveAs(fileObj);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
}
}
})();
[
サンプルをダウンロード]