> > 記事に地図を表示



記事に地図を表示

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

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


1.プラグインの入手と設定

以下から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」を取得
http://www.google.com/apis/maps/signup.html
自サイトのURLを入力して、「Generate API Key」をクリックし取得

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

例)ABQIAAAAUiB-AOY4YowjRLEEgCdiSRRrTR2vgpYbpBcoPC6Ctj0P5ZNHyhQ8Xps6HPV2DxJC4HecfV-8QXmg

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


2.テンプレートの修正

1)カテゴリーアーカイブ

<MTMapper>
<MTEntries>

</MTEntries>
</MTMapper>

のように囲む。


2)ブログ記事テンプレート

<MTMapper>

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

</MTMapper>

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


3.地図の表示設定

  地図の表示はタグ<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>


4.ブログ記事への記載方法

  [map:住所]

  <記述例>

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



このエントリーをはてなブックマークに追加



Check

トラックバック(0)

トラックバックURL: http://www.nauinet.co.jp/mt6/mt-tb.cgi/321



Check
一般社団法人ジャパンEコマースコンサルタント協会特別講師
Kindle出版のAmazon出品解説書です。
ECzine執筆記事一覧です。
Amazon出品ファイル作成代行
ブログ新着情報プログラム

ブログ記事リスト

IEが勝手に起動
消してしまった画像復元
Amazon検索で商品を表示
Amazonカテゴリー分類
Amazonで商品を見つけてもらう
iTunesアップデートのトラブル
ブログ新着情報ブログラム
Amazon編集ソフトを作成
Amazon出品ファイル作成代行
ボックス感あるデザイン
CSS作成ツール
無料のSTORES.jpに出店
源泉徴収税が免税になった!
はじめてのAmazon出品ガイド
サイトテーマの構造化マークアップ
パンくずリストの構造化マークアップ
Kindle書籍アメリカ免除申請
一太郎で作る電子書籍
Amazon 商品画像登録ガイドライン
Amazon 商品名登録ガイドライン
商品画像処理代行
ファイルコンテンツコピー
パソコンの熱暴走を防ぐ
ドライブボリューム容量変更ソフト
プロダクトキー確認ソフト
PPCキーワード作成ツール
日本語プログラミング「なでしこ」参考集
営業日カレンダー
適切なコストで既存客を守るには
LTV-Pro体験版(iPhone用)
FileMaker Go 12の活用
顧客ポートフォリオ・LTV解析ソフト
楽天市場ヤフーショッピング一括編集ソフト
Yahoo!夏の大リニューアール
MTの画像配置
TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法