MovableTypeでGoogleMapsを住所からthickboxで表示する

建物や場所を紹介するサイトをCMSで構築する場合、管理画面にGoogleMapsなどの地図をプレビューして直感的に更新したいところです。

需要が高いと思いますが、MovableTypeは意外にも、2010年1月の時点でこの機能を追加できる有力なプラグインがないようです。
手作業でのカスタマイズ方法は下記ページで紹介されていますが、投稿画面編集・GoogleMapsの座標取得の知識が必要です。

Movable Typeの記事投稿画面にGoogle Mapsを表示｜Skyward Design

もうひとつの選択肢として、「Mapper」プラグインを使って、管理画面で入力した「住所」から地図を自動表示させる方法があります。
今回はさらにjQueryプラグイン「thickbox」を連携させ、モーダルポップアップで表示するカスタマイズを紹介します。

デモサイト
注意点
プラグイン・ライブラリを用意する
GoogleMaps API Keyを入手する
プラグインを有効化する
住所のカスタムフィールドを作成する
ブログ記事テンプレートを２つ作る
コンテンツ用テンプレートの作成
ポップアップ用テンプレートの作成

デモサイト

本記事のデモサイトはこちらです。（ベース：MovableType5）

Mapperプラグインデモ＊道民部がたむろしている店

時間ないので店は数件しか登録してないですが…w

お店の個別ページで、「地図を表示する」リンクをクリックすると、住所を参照した地図がthickboxのポップアップで表示されます。
住所欄には正規版の機能であるカスタムフィールドを使っていますが、追記欄をうまく活用すればMTOSでも可能です。

注意点

住所から検索・変換をしているため、正確性にやや難があります。
（デモサイトの場合、串鳥の座標が東急の真上になってしまってます）
吹き出しの内容も詳細指定するなど、完璧さを重視する場合はGoogleの公式コードを直接書き込むなど、別の方法を検討してください。

プラグイン・ライブラリを用意する

まず、カスタマイズに必要な素材を用意します。

「Mapper」は、任意のMTタグ内に書かれた[map:住所]という「Mapタグ」を地図に変換するMovableTypeプラグインです。

http://code.google.com/p/ogawa/wiki/Mapper_Plugin

「thickbox」は、リンクに特定のclassを指定するだけで、画像やHTMLをモーダルポップアップさせるjQueryのプラグインです。

http://jquery.com/demo/thickbox/

jQuery本体も、まだ使ったことがない場合はこちらからダウンロードしてください。

http://jquery.com/

thickbox自体の設置方法はここでは割愛します。必要なファイルをサーバーにアップロードしておいてください。

GoogleMaps API Keyを入手する

Mapperを利用するには、API Keyを取得する必要があります。

下記ページで利用するサイトのURLを登録し、キーを取得してください。

http://code.google.com/intl/ja/apis/maps/signup.html

プラグインを有効化する

MovableType内にMapperをアップロードします。
管理画面内のMapperの設定画面に入ると、GoogleMaps API Keyを求められます。さっき入手したキーをコピペして保存してください。

住所のカスタムフィールドを作成する

住所欄のカスタムフィールドを作成します。
ここでは「CFaddress」としました。ここのベースネームを変更した場合や、追記を利用する場合は、以降のGoogleMapsを呼び出すテンプレートのMTタグを読み替えてください。

ブログ記事テンプレートを２つ作る

Mapperで生成される地図はJavaScriptを多用しています。このため、コンテンツ内のMETAタグの指定や、今回使うthickbox等のjQueryライブラリと衝突しやすいです。
それを防ぐために、地図だけインラインフレームで呼び出します。

MovableTypeは同じアーカイブで出力URLが違うページを複数作ることができるので、これを利用して「ブログ記事テンプレート」を２つ設定します。

画面のように設定すると、

ブログ記事: [ブログのURL]/[カテゴリー]/post-[エントリーID].html
Google Maps: [ブログのURL]/[カテゴリー]/map-[エントリーID].html

という、二種類のHTMLが記事ごとに生成されることになります。

コンテンツ用テンプレートの作成

「ブログ記事」という名前のテンプレートの方が、コンテンツ（地図を呼び出す本ページ）となります。
HTMLソースを書き、head内に以下のコードを追加してください。

<link rel="stylesheet" type="text/css" href="[ファイルへのパス]jquery.thickbox.css" media="All" />

<script type="text/javascript" src="[ファイルへのパス]jquery.js"></script>
<script type="text/javascript" src="[ファイルへのパス]jquery.thickbox.js"></script>

地図を表示するポップアップのリンクを表示したい個所に、以下のようにコードを書きます。
a要素内のURLの詳しい記述方式については、thickboxのページ内の「Inline Content」の項を参照してください。

<mt:If tag="CFaddress">
<a href="#TB_inline?width=600&height=480&inlineId=mapframe&modal=true" class="thickbox">&raquo;&nbsp;地図を表示する</a& amp;gt;
</mt:If>

さらにページの末尾、bodyの閉じタグの上あたりに、以下のコードを書きます。
フレームのwidthとheightは任意調整してください。

<mt:If tag="CFaddress">
<div id="mapframe" style="display: none;">
<p class="map-title"><$mt:EntryTitle encode_html="1"$>の周辺地図</p>
<iframe src="map-<$mt:EntryID$>.html" width="600" height="400" marginwidth="0" marginheight="0"></iframe>
<p class="map-close"><input type="submit" value="×閉じる" onclick="tb_remove();" /></p>
<!-- /#mapframe --></div>
</mt:If>

重要なのは、インラインフレームの内部HTMLを指定している部分です。

map-<$mt:EntryID$>.html

上記のようにEntryIDタグを仕込むことで、２つ目のエントリーテンプレートを呼び出すことになります。

ポップアップ用テンプレートの作成

「Google Maps」という名前のテンプレートの方は、ポップアップ用です。以下のコードが全てになります。
地図のwidthとheightは任意調整してください。

<html>
<body style="margin: 0; padding: 0;">
<mt:If tag="CFaddress">
<mt:Mapper width="600" height="400" zoom="18">
<p>[map:<$mt:CFaddress convert_breaks="0"$>]</p></mt:Mapper>
</mt:If>
</body>
</html>

Mapperで拡張されたMTタグを使い、カスタムフィールドの「住所」を表示します。
段落でマークアップさせないよう、「convert_breaks」モディファイアに「0」を指定しておいた方が安全です。

METAタグなどは敢えて指定しない方が、各ブラウザでちゃんと表示されるようです。

最後にテンプレートを再構築し、リンクをクリックするとポップアップが出るか確認してください。

—–
EXTENDED BODY:

Blog