記事に地図を表示してみましょう！：Movable Type(MT)の無料テンプレート

Movable Type(MT)の無料テンプレート >> 記事に地図を表示してみましょう！

記事に地図を表示してみましょう！

　記事に地図を表示するとき、グーグルマップをコピーして表示させることは出来ますが、沢山の記事があるときは面倒ですね。
「記事に住所を書くだけで、自動で表示してくれたらいいな」と思っていました。

グーグルマップを表示する便利なプラグインがありました。
住所を書くだけで、地図（グーグルマップ）を表示してくれるOgawa::MemorandaさんのMapper Pluginです。
今回は、プラグインの設定と利用法についての説明です！

１．プラグインの設定

まず、Mapper Pluginを入手しましょう。以下からプラグインをダウンロードします。

ダウンロードして解凍して、「Mapper.pl」をMTをインストールしたフォルダ内のpluginsフォルダにアップロードします。

　次に、「Google Maps API key」を取得します。
http://www.google.com/apis/maps/signup.html にアクセスして、ページ下部の入力部分に自サイトのＵＲＬを入力して、「Generate API Key」をクリックします。

次のページが表示されたら、「Google Maps API key」をコピーします。

次に、ＭＴのサイトの管理ページの設定をクリックして、プラグインの設定を表示します。

「Google Maps API Key:」の欄に、先ほどコピーした　Google Maps API Key　を貼り付けます。
「変更を保存」をクリックして、準備完了です。

２．テンプレートへタグの追加

　当サイトのテンプレートをご利用の場合、カテゴリーアーカイブ（カテゴリー表示用）のテンプレートでは、

<MTMapper>
<MTEntries>

～

</MTEntries>
</MTMapper>

のように、タグをタグで囲みます。

エントリーアーカイブでは、は使用していませんので、

<MTMapper>
<h2><$MTEntryTitle$></h2>
<div class="doc">
<$MTEntryBody$>
</div>
<div class="doc">
<$MTEntryMore$>
<br />
</div>
</MTMapper>

のように、<$MTEntryBody$>と<$MTEntryMore$> 囲むように、タグを設定します。

３．地図の表示設定

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

method="Google / Alps"
どのマッピングサービスを使ってマップを描画するかを選択します。
指定しない場合（デフォルト）はGoogle Mapを表示します。
width="size" height="size"
描画する地図の横幅と縦幅を指定します。
指定しない場合は、400px×300pxになります。
zoom="zoom-level"
描画する地図のズームレベルを指定です。
表示する場所によってはGoogle Mapsが描画できないズームレベルもあるので注意しましょう。
maptype="G_MAP_TYPE / G_SATELLITE_TYPE / G_HYBRID_TYPE"
描画する地図のタイプの指定です。

記述例：
　　<MTMapper method="Google" width="350px" height="350px">
　　～省略～
　　</MTMapper>

４．地図の表示指定

地図表示の記述方法は、

Alps Clip!・はてなマップライクな記述方法:

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

adr microformatライクな記述方法:

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

上記の方法で、利用しやすい記述を選択してください。

例えば、<p>[map:福岡県福岡市博多区博多駅中央街1-1]</p>と記述すると、下図のようなグーグルマップが表示されます。
「改行を変換する」という設定では、[map:福岡県福岡市博多区博多駅中央街1-1]　の上下を一行空けることで、自動的に<p>　～　</p>が挿入されます。

[map:福岡県福岡市博多区博多駅中央街1-1]

早速、挑戦してみませんか？

スポンサードリンク