会社のホームページといえば、所在地も記載しますよね。
せっかくなら地図でわかりやすく表示したいものの、地図なんて自分ではなかなか作れるものではありません。
そこで重宝するのが、今回ご紹介する『Mapper』プラグインです。
このプラグインは、住所は緯度経度などの情報をもとに、Google Mapなどの地図画像を無料で表示してくれます。
■『Mapper』プラグインの設置方法
1.Google Maps API Keyを取得する
⇒ Google Maps API
英語でいろいろ書かれていますが、通常のインターネットサイトへの利用であれば問題ありません。
※イントラネットや違法性のあるサイトには利用できません。
「Sign up」ページ最後のチェックボックスにチェックし、Movable TypeをインストールしているURL(ブログのURLではないので注意)を入力して「Generate API key」をクリック⇒googleアカウントにログインしていない場合は、メールアドレスと適当なパスワードでアカウント作成・ログイン⇒キーコードが発行されます。
2.Mapper.zipをダウンロードし、解凍する
⇒ Mapperダウンロード:Hirotaka Ogawaさんのサイトへ
3.Mapper.plをMovable Typeのpluginsディレクトリにコピーする
4.管理画面「プラグインの設定」で、Mapperプラグインの「設定を表示」し、1で取得したAPI Keyを入力して<変更を保存>する
5.地図を表示させたい場所を <MTMapper>~</MTMapper> タグで囲み、 [map:address] で地図の表示先を指定する(詳細後述)
・MTMapperタグには次のオプション(アトリビュート)を付記することができます。
width="size" :描画する地図の横幅を指定。デフォルトは400px。
height="size" :描画する地図の縦幅を指定。デフォルトは300px。
zoom="zoom-level" :描画する地図のズームレベルを指定。デフォルトは15。
・address部分(地図表示先)は「東京都○○区○○1-1-1」のような住所表記のほか、「x経度y緯度(例:x139.729116y35.660391)」もしくは「緯度,経度(例:35.660391,139.729116)」のような「座標」表記も記述できます。
■地図を表示させる方法(2通りあります)
A.エントリー記事内に地図を表示させる場合
1.エントリー記事の表示に関係するテンプレート(※)の <body> タグのあとに <MTMapper> タグ、 </body> タグのあとに </MTMapper> タグを追加して保存
※標準なら、メインページ(index.html)と各アーカイブ(エントリー・アーカイブ、カテゴリー・アーカイブ、等)
以下は、メインページにMapperタグを追加した例です。
~省略~ ~省略~
2.エントリー記事内の、地図を表示させたい場所に以下のmapタグを記述
[map:東京都○○区○○1-1-1]
このとき、自動改行にしている場合は、行の前後に改行を1行入れてください。
自動改行にしていない場合は、<div>[map:東京都○○区○○1-1-1]</div> のようにdivタグで挟んでください。
B.ヘッダーやナビ部分など、エントリー記事以外の場所に地図を表示させる場合
各テンプレートの表示させたい場所に、以下のタグを入力します。
東京都○○区○○1-1-1 (Sorry, this address cannot be resolved.)
※参考:six apart社のホームページでも紹介されています。ここにも詳しい設定方法の記載がありますので参考にしてください。
⇒ Mapperプラグインの紹介
(six apart社のサイトへリンクしています)