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

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

1.作成する事例

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

  • カテゴリが2階層あり、1階層目で地域、2階層目で分類を表すようにします。
  • 1階層目のカテゴリのアーカイブページで、その下の2階層目のカテゴリの場所を含んだ地図を出力します。
  • 地図のマーカーの色を、2階層目のカテゴリに応じて変えます

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

  • 東京
    • 神社仏閣
    • ショッピング
    • 遊園地・テーマパーク
    • ...
  • 神奈川
    • 神社仏閣
    • ショッピング
    • 遊園地・テーマパーク
    • ...
  • ...

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

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

2.データの構造

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

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

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

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

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

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

4.カテゴリの作成

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

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

5.記事の作成

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

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

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください