Mapperプラグイン

googlemapをMTに挿入するモジュール

Mapperプラグインを

ダウンロードします。

http://code.as-is.net/public/wiki/Mapper_Plugin.ja_JP

【使い方】

Mapper.zip を解凍しMapper.plをpluginsディレクトリにアップ。

使用するプラグインの設定でMapperプラグインの「設定を表示」をクリックします。

Google Maps API Keyを設定する画面が表示されますから、API Keyを入力して「変更を保存」をクリックして保存。

※Google Maps API Keyは使うサイト用にgoogleで取得しておく。

次に、表示させたい場所のテンプレートにMTコンテナタグを書き込みます。

<MTMapper></MTMapper>

例えば個別エントリーだったら

<MTMapper>
   <div class=”entry-body”>
      <$MTEntryBody$>
   </div>
   <div id=”more” class=”entry-more”>
      <$MTEntryMore$>
   </div>
</MTMapper>

これでテンプレート部分は完了です。

次に、エントリー記事を書きます。

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

または、

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

と書けば、ブログ記事にgooglemapが表示されます。

address部分には

addressには「東京都江東区三好4-1-1」のような「住所」表記のほか、「x139.808004y35.679714」「35.679714,139.808004」のような「座標」表記も記述できます。座標は「x経度y緯度」もしくは「緯度,経度」のようにペアで指定します。住所表記で正確な場所をポイントできない場合などには座標表記を使うとよいでしょう。

MTMapperコンテナタグにはオプションがつけられます。

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

width=”size”
描画する地図の横幅を指定します。デフォルトは400px。
height=”size”
描画する地図の縦幅を指定します。デフォルトは300px。
zoom=”zoom-level”
描画する地図のズームレベルを指定します。デフォルトは15。0以上の整数を指定できますが、地域によってはGoogle Mapsが描画できないズームレベルもあります。
maptype=”G_NORMAL_MAP|G_SATELLITE_MAP|G_HYBRID_MAP”
描画する地図のタイプを指定します。デフォルトはG_NORMAL_MAP。

例:幅350px、高さ400pxのgooglemapを表示させる

テンプレートに以下のMTMapperコンテナタグを書きます
★ちなみにpxを書かないとうまく動作しないので気をつけてください!

<MTMapper method=”Google” width=”350px” height=”400px”></MTMapper>

あとは、googlemapの吹きだし部分はブログのデフォルトの文字色になっているので白い文字フォントになっている場合は注意が必要です。

 

使ってるCSSに

 

/*googlemap用*/

.adr{color:#000;}

 

とか入れるとグットです。

簡単でこれは便利だな〜
商用利用も無料だし素敵です。

 

コメント

タイトルとURLをコピーしました