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

以前に、「Googleマップカスタムフィールドプラグインを使った一覧地図の作成」という記事を公開していました。
拙作のGoogleマップカスタムフィールドプラグインを使って、カテゴリごとに場所の一覧の地図を出力するというものです。
その例をカスタマイズして、地図上のマーカーの色を変えられるようにする方法を解説します。

1.作成する事例

今回は、以下のような地図を作成します。

例えば、カテゴリを以下のような構造にするとします。

この場合に、「東京」カテゴリのアーカイブページを開くと、東京の全分類の場所が地図に表示され、分類ごとにマーカーの色を別にするようにします。
実際の地図は、こちらのリンクのような感じになります。

今日は、データ構造と、必要なカスタムフィールド、そしてカテゴリ／記事の入力までを解説します。

この事例では、ブログを使ってデータを入力します。

個々の地域（都道府県等）と分類は、カテゴリに対応させます。
前述したように、1階層目のカテゴリ名を地域名とし、2階層目のカテゴリ名を分類名にします。
また、カテゴリにGoogleマップのカスタムフィールドと、マーカーの色のカスタムフィールドを追加し、地域の地図を表示できるようにします。

一方、個々の場所をブログ記事に対応させます。
ブログ記事のタイトルを、場所の名前にします。
また、ブログ記事の本文として、その場所の解説等を入れます。
さらに、ブログ記事にGoogleマップのカスタムフィールドを追加し、場所の地図を表示できるようにします。

「Googleマップカスタムフィールドプラグインを使った一覧地図の作成」の記事の「2.カスタムフィールドの作成」と同じ手順で、カテゴリと記事に地図のカスタムフィールドを作成します。
さらに、カテゴリにもう1つ以下のようなカスタムフィールドを作成し、分類ごとにマーカーの色を選べるようにします。

設定項目	設定値
名前	アイコン色
種類	ドロップダウン
オプション	red=赤,blue=青,green=緑,ltblue=水色,yellow=黄色,purple=紫,pink=ピンク,orange=オレンジ
ベースネーム	category_icon_color
テンプレートタグ	CategoryIconColor

次に、地域と分類をカテゴリとして作ります。

1階層目のカテゴリ（地域）では、その地域のすべての場所を表示できるように、地図のカスタムフィールドで中心やズームレベルを設定します。
また、2階層目のカテゴリ（分類）では、マーカーにつける色を、カスタムフィールドで選択します。

次に、個々の場所ごとにブログ記事を作ります。

場所の名前をブログ記事のタイトルにし、場所の解説をブログ記事の本文に入力します。
また、Googleマップのカスタムフィールドで、場所の地図を表示するようにします。