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

昨日の続きで、拙作のGoogleマップカスタムフィールドプラグインを使って、カテゴリごとの一覧地図を作成する方法を紹介します。
今日は、カテゴリアーカイブテンプレートの書き方です。

1.JavaScriptのインストール

一覧地図の表示は、拙作の「many_marker_gmap.js」というJavaScriptと組み合わせて行います。
以下のリンクをクリックすると、このJavaScriptのソースコードをダウンロードすることができます。

多色に対応するために、以前に公開していたものから少しバージョンアップしています。
以前にダウンロードした方は、ダウンロードしなおしてください。

ファイルをダウンロードしたら、ご自分のブログの出力先ディレクトリにアップロードします。

2.地図用のdiv要素の出力

次に、テンプレートを書き換えていきます。
まず、カテゴリアーカイブテンプレート内で、地図を出力したい位置に、以下のような部分を追加します。

<mt:CategoryPrefMapBlock>
  <div id="gmap" style="width : <$mt:GMapCFWidth$>px; height : <$mt:GMapCFHeight$>px;">地図を読み込んでいます...</div>
</mt:CategoryPrefMapBlock>

3.場所一覧をリストで出力

場所の一覧（＝カテゴリ内のブログ記事の一覧）を、ul／li要素等を使って、リスト形式で出力しておくこともできます。
その場合、カテゴリアーカイブテンプレート内で、リストを出力したい位置に、以下のような部分を追加します。

<mt:CategoryPrefMapBlock>
  <$mt:SetVar name="ctr" value="0"$>
  <mt:SubCategories>
    <mt:SubCatIsFirst><ul></mt:SubCatIsFirst>
    <li><$mt:CategoryLabel>
    <mt:Entries>
      <mt:EntryLocationMapBlock>
          <mt:SetVarBlock name="js"> onmouseover="FJManyMarkerGoogleMaps.mouseover(<$mt:GetVar name="ctr"$>);" onmouseout="FJManyMarkerGoogleMaps.mouseout(<$mt:GetVar name="ctr"$>);"</mt:SetVarBlock>
          <$mt:SetVar name="ctr" op="++"$>
      <mt:Else>
          <$mt:SetVar name="js" value=""$>
      </mt:EntryLocationMapBlock>
      <mt:EntriesHeader><ul></mt:EntriesHeader>
        <li><a href="<$mt:EntryPermalink$>"<$mt:GetVar name="js"$>><$mt:EntryTitle$></a></li>
      <mt:EntriesFooter></ul></mt:EntriesFooter>
    </mt:Entries>
    </li>
    <mt:SubCatIsLast></ul></mt:SubCatIsLast>
  </mt:SubCategories>
</mt:CategoryPrefMapBlock>

上の例では、2階層のリストが出力されます。
1階層目が分類名のリストで、2階層目に各場所のリストになります。
個々の場所の名前（＝ブログ記事のタイトル）が、2階層目のリストに出力されます。
また、場所の名前をマウスポインタで指すと、地図上でその場所の情報がポップアップ表示するような仕組みになっています。

なお、上の書き方では、カテゴリに地図を表示するようにしている場合のみ、場所一覧が出力されます。

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

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

<mt:CategoryPrefMapBlock>
  <mt:SubCategories>
    <$mt:CategoryIconColor setvar="icon"$>
    <mt:Entries>
      <mt:EntryLocationMapBlock>
        <mt:SetVarBlock name="push(mapinfo)">
          {
            lat : <$mt:GMapCFLatitude$>,
            lng : <$mt:GMapCFLongitude$>,
            title : '<$mt:EntryTitle encode_js="1"$>',
            icon: '<$mt:GetVar name="icon" 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:SetVarBlock>
      </mt:EntryLocationMapBlock>
    </mt:Entries>
  </mt:SubCategories>
 
  <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>

上記のリストの10行目と12行目では、情報ウィンドウ（地図上で場所のマーカーをクリックした時にポップアップ表示されるウィンドウ）の内容を出力しています。
この部分をカスタマイズすることで、情報ウィンドウに様々な情報を出力することができます。

また、31行目の「maxWidth : 300」は、情報ウィンドウの幅の最大値を表します（単位はピクセル）。
情報ウィンドウの幅を変えたい場合は、この部分の「300」の値を書き換えてください。

5.2階層目のカテゴリの処理

上記のリストでは、1階層目のカテゴリ（地域）のアーカイブページに、その地域のすべての場所の地図が表示されます。
一方、2階層目のカテゴリ（分類）のアーカイブページには、空の地図が表示されます。

2階層目のカテゴリのページに何か表示したい場合、以下のようにテンプレートを組んで、1階層目と2階層目の出力を分けるようにします。

<mt:HasNoParentCategory>
  前述のリスト(1階層目の場合の処理)
<mt:Else>
  2階層目の場合の処理
</mt:HasNoParentCategory>

お知らせ