Googleマップカスタムフィールドプラグインを使った一覧地図の作成(後半)

昨日の続きで、Googleマップカスタムフィールドプラグインを使って、場所の一覧の地図を作る方法を紹介します。
今日は後半として、カテゴリアーカイブテンプレートに、地図を出力ためのテンプレートタグを入れる手順を解説します。

1.JavaScriptのインストール

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

many_marker_gmap.js

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

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:Entries limit="$limit">
        <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>
</mt:CategoryPrefMapBlock>

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

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

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

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

<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: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>

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

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