Movable Type 4.2にGoogle Mapを

「Custom FieldsでMTにGoogle Mapを - cosmos blog」の続き。

前回はMovable Type 3.6にエントリー作成でアーカイブにGoogle Mapを表示させる方法だったんですが、Movable Type 4.2にアップデートしたので、MT4.2での方法も記載しておこうかと。

そう。完全に、自分の記憶の為です・・・。

Movable Type 3.6と違い、Movable Type 4.xには、デフォルトでCustom Fieldsが組み込まれているので、Custom Fieldsをインストールしたりする手間がなくなったのは嬉しいかも。

基本的な設定は、Movable Type 3.6のときと同じ。
で、上記の理由からCustom Fieldsの設定だけが違う手順になるということですね。

Movable Type 3.6の手順はコレ。

1. Custom Fieldsの導入。
2. Custom Fieldsの設定。
3. Google Map API Keyを取得。
4. テンプレートと公開設定の追加・変更。
5. エントリーで緯度・経度を入力して、Google Mapを呼び出す。

参照：Custom FieldsでMTにGoogle Mapを - cosmos blog

Movable Type 4.xでは、1のCustom Fieldsの導入。という手順がなくなります。
では早速。

自サイト設置を目的としているので、設定内容は*cosmos* blogにあわせています。
（アーカイブマッピングとか）

【その1】Custom Fieldsの設置

Movable Type 4.xにはカスタムフィールドが最初から組み込まれているので、直接設定ページにいけば良いだけです。

1) Movable Typeのダッシュボードから、「設定」→「カスタムフィールド」を選択。

2) カスタムフィールド設定画面に移動するので、「フィールドを作成」をクリック。

3) カスタムフィールドの作成画面にで必要項目を埋める。

ベースネームは自動反映されるので特別変更の必要はありません。
必須のチェックも必要ありません。

▼緯度
名前 → lat
説明 → 緯度
種類 → テキスト
テンプレート タグ → EntryDataLat

▼経度
名前 → lon
説明 → 経度
種類 → テキスト
テンプレート タグ → EntryDataLon

それから、Mapのアイコンに説明用の噴出しを付ける場合は以下も作成します。

▼説明噴出し用
名前 → description
説明 → 噴出し内容
種類 → テキスト(複数行)
テンプレート タグ → EntryDataDescription

4) ブログ記事新規作成画面をカスタマイズする。

「設定」→「ブログ記事」をクリックして、ブログ記事設定画面を開きます。
画面下のほうにある「ブログ記事作成画面の初期設定」に、先ほど設定したカスタムフィールド名が表示されているはずなので、チェックボタンをOnにして保存します。

エントリー作成画面に以下のような3つのフィールドが表示されればOKです。

【その2】Google Map API Keyを取得。

取得方法は、前回と同じです。

【その3】テンプレートと公開設定の追加・変更。

1) ブログ記事テンプレートを変更する。

Movable Type 3.xまでの"エントリー・アーカイブ"は、4.xからは"ブログ記事"に変更されています。
変更箇所・追記内容は、前回と同じです。

マッピングの設定は各テンプレート画面の「テンプレートの設定」で行います。
*cosmos* blogでは、全てarchiveフォルダ下に収めているので、以下のような設定です。

ブログ記事テンプレートでは、ブログ記事のチェックをOnにすることで優先テンプレートに設定をするのも忘れずに。

2) Google Map用JSテンプレートを新規作成する。

こちらも、以前と同じ設定で良いのですが、今回は噴出し用のフィールドも追加しているので、JSもこれに対応させています。

マッピングパスは「archives/%y/%m/%f.js」です。

function Map() {
	//Map
	var map = new GMap2(document.getElementById("EntryMap"));
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	map.setCenter(new GLatLng(<$MTEntryDataLat$>, <$MTEntryDataLon convert_breaks="0"$>),18);
	var point = new GLatLng(<$MTEntryDataLat$>, <$MTEntryDataLon convert_breaks="0"$>);
	var marker = new GMarker(point);map.addOverlay(marker);
<MTIfNonEmpty tag="MTEntryDataDescription">
	marker.openInfoWindowHtml("<$MTEntryDataDescription$>");
	GEvent.addListener(map,"click",function(marker){marker.openInfoWindowHtml("<$MTEntryDataDescription$>");});
</MTIfNonEmpty>} 

【その4】エントリーで緯度・経度を入力して、Google Mapを呼び出す。

書き込み方法は、前回と同じです。

毎回タグを打ち込むのが面倒ですなぁ。
いつも同じ場所に地図を表示させたい時は、<MTIfNonEmpty>を使って自動的に排出されるようにしてみたらいいんじゃないかと思っていたりします。