Googleマップカスタムフィールドプラグインを使った一覧地図の作成(多色版・その3)

先日紹介した「Googleマップカスタムフィールドプラグインを使った一覧地図の作成」の事例で、カテゴリごとにマーカーの色を変えるのではなく、個々の場所ごとにマーカーの色を変えるカスタマイズを紹介します。

1.カスタムフィールドの作成

まず、場所ごとにマーカーの色を保存するために、記事に以下のようなカスタムフィールドを作成します。

設定項目	設定値
名前	任意に決めます
種類	ドロップダウン
オプション	red=赤,blue=青,green=緑,ltblue=水色,yellow=黄色,purple=紫,pink=ピンク,orange=オレンジ
ベースネーム	entry_icon_color
テンプレートタグ	EntryIconColor

そして、個々の記事でカスタムフィールドに色を設定します。

2.JavaScriptのインストールとテンプレートの書き換え

記事アーカイブテンプレートを編集し、「Googleマップカスタムフィールドプラグインを使った一覧地図の作成(後半)」の記事の手順1～3を行います。

3.地図表示用のJavaScriptの出力

最後に、地図表示用のJavaScriptを出力します。
テンプレートの最後の方（タグの直前あたり）に、以下の部分を追加します。

<mt:CategoryPrefMapBlock>
    <mt:Entries limit="$limit">
        <mt:EntryLocationMapBlock>
            <mt:SetVarBlock name="push(mapinfo)">
                {
                    lat : <$mt:GMapCFLatitude$>,
                    lng : <$mt:GMapCFLongitude$>,
                    title : '<$mt:EntryTitle encode_js="1"$>',
                    content : '<mt:Unless strip_linefeeds="1" encode_js="1">
<p><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></p>
<div><$mt:EntryBody$></div>
</mt:Unless>'<mt:If tag="EntryIconColor">,
                    icon: '<$mt:EntryIconColor$>'</mt:If>
                }
            </mt:SetVarBlock>
        </mt:EntryLocationMapBlock>
    </mt:Entries>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="<$mt:BlogURL$>many_marker_gmap.js"></script>
    <script type="text/javascript">
        FJManyMarkerGoogleMaps.show(
            {
                id : 'gmap',
                lat : <$mt:GMapCFLatitude$>,
                lng : <$mt:GMapCFLongitude$>,
                zoom : <$mt:GMapCFZoom$>,
                maxWidth : 300
            },
            [
<mt:Loop name="mapinfo" glue=",">
<$mt:GetVar name="__value__"$>
</mt:Loop>
            ]
        );
    </script>
</mt:CategoryPrefMapBlock>