毎日コミュニケーションズ刊の｢Web Designing｣06年4月号に掲載されている｢blog under construction｣のコーナーに、｢自分のblogにGoogle Mapsを貼ってみよう｣という記事が載っていたので、地図が表示できたらいいなと軽い気持ちで取り付け作業開始したのですが、早速躓きまして｢MTGoogleMaps｣というプラグインを配布しているサイトが、日本からのアクセスが増えて色気が出たのかフリーウェアからシェアウェアに変更していたんですよ。仕方なくお金払ってプラグインを手に入れたのですが、これが酷いモノを掴まされまして、全く表示しないんですよ。調べてみると、現在のメジャーどころの最新ブラウザーのIEと、FireFox、Safariでは表示できないんだそうです。NN7.1では表示したそうなんですが、そんなんじゃ使い物になりません。一瞬、払った金返せと思ったのですが、外人相手に英文で返金交渉かと思うと面倒になったので、1,500円ぐらいなので、諦めることにしました。

で、新たに見つけたのが、｢Ogawa::Memoranda｣さんの｢Mapper Plugin｣エントリーで配布されている｢MTMapper｣プラグインです。｢MTGoogleMaps｣と違って｢Process Tags｣というプラグインも必要とせず、単体で動作するので、設置が簡単。エントリーで表示させる場合も簡単な命令を書き込むだけと、こちらも簡単だったので、こちらを使うことにしました。ただし、吹き出しの表示を｢MTGoogleMaps｣の様に出しっぱなしが出来ないのがちょっと難点といえば難点でしょうか。本文に含んだ形で表示するだけなら別に必要ない機能なんですけどね。

ということで、覚え書きを兼ねて導入手順を書きます。

これは、｢Google｣から｢Google Maps API Key｣を取得しておかないと話しにならないので、まず、｢Google Maps API Key｣を取得してください。

まず、こちらから、｢MTMapper｣プラグインをダウンロードします。圧縮ファイルを解凍すると、｢Mapper.pl｣というファイルが出来ますので、コレを｢Movable Type｣のpluginsディレクトリにアップロードしてください。し終わったら、パーミッションを755に設定します。

次に、メインメニューから各ブログへ入り、｢プラグインの設定｣画面を開きます。そこで｢MTMapper｣プラグインの｢設定を表示｣をクリックして設定画面を表示します。ここに｢Google Maps API Key｣を設定する書き込みスペースがありますから、｢Google Maps API Key｣を入力して｢変更を保存｣をクリックして保存します。これで、プラグインの設定は終了です。

次にテンプレートを編集します。変換対象とするテンプレートの領域をMTMapperコンテナで囲んで指定します。

インデックステンプレート・カテゴリーアーカイブ・日付アーカイブは、<MTEntries>があるので、その直前に<MTMapper>を入れて範囲を指定します。終了タグの後ろにも忘れず</MTMapper>と入れておきます。ついでに<MTEntries>にコンテナタグを書き込んで表示設定もしています。

method="Google / Alps"

どのマッピングサービスを使ってマップを描画するかを選択します。デフォルトはGoogleです。
以下のオプションは、method="Google"の場合(methodオプションが未指定の場合も含む)のみ有効です。

width="size"

描画する地図の横幅を指定します。デフォルトは400px。

height="size"

描画する地図の縦幅を指定します。デフォルトは300px。

zoom="zoom-level"

描画する地図のズームレベルを指定します。デフォルトは4。0以上の整数を指定できますが、地域によってはGoogle Mapsが描画できないズームレベルもあります。

maptype="G_MAP_TYPE / G_SATELLITE_TYPE / G_HYBRID_TYPE"

描画する地図のタイプを指定します。デフォルトはG_MAP_TYPE。

引用先 Ogawa::Memoranda

<MTMapper method="Google" width="370px" height="370px" zoom="2" maptype="G_MAP_TYPE">
   <MTEntries>
--省略--
   </MTEntries>
</MTMapper>

個別エントリーアーカイブは、<MTEntries>が無いので、上記で設定した位置を参考にしながら範囲を指定します。自分サイトの場合は下記の様にしています。

<MTMapper method="Google" width="370px" height="370px" zoom="2" maptype="G_MAP_TYPE">
<h2><$MTEntryDate format="%x"$></h2>
<h3><$MTEntryTitle$></h3>
<hr noshade="noshade" />
<$MTEntryBody$>
<div id="a<$MTEntryID pad="1"$>more"><div id="more">
<$MTEntryMore$>
  </div></div>
<br style="clear: both;" />
<p class="posted">投稿者 <$MTEntryAuthor$> : <$MTEntryDate$></p>
</MTMapper>

修正が終わったら、念のため全ページ再構築をしましたが、恐らくしなくても大丈夫だと思います。

それでは、エントリー中に書き込んで地図を表示させましよう。下記のようなパターンでmapタグを書くと、システムが自動的に地図画像へと変換します。

Alps Clip!・はてなマップライクな書き方1

<p>[map:address]</p>
<div>[map:address]</div>

Alps Clip!・はてなマップライクな書き方2
(改行設定が｢改行を変換する｣になっている場合)：

本文。

[map:address]

本文続き。

adr microformatライクな書き方

<div class="adr">address</div>
<p class="adr">address</p>

addressには｢東京都千代田区永田町1-7-1｣のような｢住所｣表記のほか、｢x139.744753y35.676085｣｢35.676085,139.744753｣のような｢座標｣表記も記述できます。座標は｢x経度y緯度｣もしくは｢緯度,経度｣のようにペアで指定します。住所表記で正確な場所をポイントできない場合などには座標表記を使うとよいでしょう。また、map:address (annotation)のように住所表記の後にアノテーションを加えられるようになっていますので、吹き出しに説明文が表示できます。(ちょっとかっこ悪いけど)

実際にこんな感じで表示されます。

[map:東京都千代田区永田町1-7-1 (国会議事堂)]

というわけで、自分が行ったお気に入りのお店とかの地図を入れたい時とか便利だと思います。設置作業も簡単なんで、挑戦してみてください。