記事に地図を表示

Movable Typeの記事に住所を書くだけでグーグルマップを表示させる方法です。

住所を書くだけで、地図（グーグルマップ）を表示してくれる<a href="http://as-is.net/blog/">Ogawa::Memoranda</a>さんのMapper Pluginです。

１．プラグインの入手と設定

以下からMapper Plugin「<a href="http://code.as-is.net/public/wiki/Mapper_Plugin.ja_JP">Mapper.zip</a>」をダウンロード
http://code.as-is.net/public/wiki/Mapper_Plugin.ja_JP

ダウンロードして解凍したら「Mapper.pl」を、MTのフォルダ「plugins」にアップロード

次で「Google Maps API key」を取得
https://www.google.com/apis/maps/signup.html
自サイトのＵＲＬを入力して、「Generate API Key」をクリックし取得

「Your key is :」下のキーをコピー

例）ABQIAAAAUiB-AOY4YowjRLEEgCdiSRRrTR2vgpYbpBcoPC6Ctj0P5ZNHyhQ8Xps6HPV2DxJC4HecfV-8QXmg

ＭＴのプラグイン「Mapper 0.12」の設定で上の「Google Maps API key」を貼り付ける

２．テンプレートの修正

１）カテゴリーアーカイブ

<MTMapper>
<MTEntries>
～
</MTEntries>
</MTMapper>

のように囲む。

２）ブログ記事テンプレート

<MTMapper>

<$MTEntryTitle$>
<$MTEntryBody$>
<$MTEntryMore$>

</MTMapper>

のように、<$MTEntryBody$>と<$MTEntryMore$> 囲む

３．地図の表示設定

　　地図の表示はタグ<MTMapper>に、追加記入（アトリビュート）して表示指定

　　マッピングサービス指定
　　method="Google / Alps"

　　描画する地図の横幅と縦幅を指定
　　width="size" height="size"

　　描画する地図のズームレベルを指定
　　zoom="zoom-level"

　　描画する地図のタイプの指定
　　maptype="G_MAP_TYPE / G_SATELLITE_TYPE / G_HYBRID_TYPE"

　　＜記述例＞

　　<MTMapper method="Google" width="620px" height="400px">
　　～省略～
　　</MTMapper>

４．ブログ記事への記載方法

　　[map:住所]

　　＜記述例＞

　　[map:東京都港区赤坂1-1-1]