Movable Type のカスタムフィールドと
MTAppjQuery プラグインで地図座標を管理する

いつも通りすっかりご無沙汰なBUNですが、Movable Type Advent Calendar 2013 の15日目の記事を書きます。

それにしても、約1年ぶりって。。。
雪も降りしきる訳・・・ですね(。-_-。) www

さて、先日 Google Maps JavaScript API v2 の廃止に伴い、過去に制作したサイトで「管理画面に地図は互換表示されてるものの、ジオコーディングが利用できない」ことがありました。
導入していたプラグインに含まれる JavaScript の記述を書き換えることで解消できたのですが、プラグイン自体が既にアップデートされていない・・・という、ままある?状況。

そこで、MT 標準のカスタムフィールドと MTAppjQuery プラグインで地図座標の管理をする方法について共有してみます。

やりたいこと

今回は、(ブログ)記事へカスタムフィールドを追加しつつ、別途用意した JavaScript を読み込ませる形で編集画面に地図を表示させます。あわせて、地図の中心座標やズームレベルの変更にあわせて各フィールドの入力値を変更したり、ジオコーディングで大まかな位置を表示できるようにします。

完成図は、下記のようなイメージです。

img-bun131215_01.png

なお、 MTAppjQuery プラグインはあらかじめインストールしてある前提で、解説していきます。

カスタムフィールドの追加

はじめに、カスタムフィールドを3つ追加します。
システムオブジェクトは「記事」、種類は「テキスト」とします。

名前:緯度
ベースネーム、および、テンプレートタグ:lat

名前:経度
ベースネーム、および、テンプレートタグ:lng

名前:ズームレベル
ベースネーム、および、テンプレートタグ:zoom

ここで記載しているベースネームとテンプレートタグは、あくまで一例です。
「lng じゃなくて long だろ!」など、思うところがある方はご自由に変更してください w

なお、カスタムフィールドだけを追加する専用テーマを用意しました。
ごちらをご利用の場合は、ダウンロードして ZIP ファイルを解凍後にできるフォルダ(mt)を MT のシステムディレクトリと見立てて、「/themes/」の中身をアップロードしてください。

地図用カスタムフィールド追加テーマ
http://download.d-s-b.jp/MTThemes/theme_cf_googlemaps.zip

img-bun131215_02.png

アップロード後、任意のウェブサイトまたはブログへテーマを適用します。

JavaScript のアップロードと user.css の修正

導入済みの方はご存知の通り、MTAppjQuery プラグインは「/mt-static/plugins/MTAppjQuery/user-files/」に含まれる JavaScript や CSS を調整してカスタマイズできます。

そこで、Google マップ表示用の JavaScript をこのディレクトリにアップロードして管理することにしましょう。

MTAppjQuery user-files 追加データ
http://download.d-s-b.jp/MTAppjQuery_user-files.zip

ZIP ファイル解凍後、 GoogleMaps.js の2〜11行目をお好みで調整してください。

var lat_basename = 'lat';    // 「緯度」カスタムフィールドのベースネーム
var lng_basename = 'lng';    // 「経度」カスタムフィールドのベースネーム
var zoom_basename = 'zoom';    // 「ズームレベル」カスタムフィールドのベースネーム
var map_wrapper_element = 'map-wrapper';    // 上記3つのカスタムフィールドのラッパーID
var map_element = 'gmap';    // 地図を表示させる要素のID名
var map_search_element	= 'map-serach-box';    // 「地図を検索」部分のラッパーID
var lat_default = 37.400529;    //「緯度」の初期値
var lng_default = 140.359743;    //「経度」の初期値
var zoom_default = 15;    // 「ズームレベル」の初期値

lat_basename・lng_basename・zoom_basename はカスタムフィールドのベースネーム、
lat_default・lng_default・zoom_default には地図座標などの初期値をそれぞれ設定します。

参考までに、 GoogleMaps.js の13行目で「緯度のカスタムフィールドがある場合のみ」それ以降のコードを実行するようにしてあります。

if(jQuery('#customfield_' + lat_basename + '-field').length){

特定のウェブサイト(やブログ)に限定する場合は、ここを調整してください。

// 緯度のカスタムフィールドがあり、かつ、ブログ ID が 2 の場合に限定
if(jQuery('#customfield_' + lat_basename + '-field').length && mtappVars.blog_id == 2){

また、14〜21行目で3つのカスタムフィールドをタイトルの次に並べつつ、ドラッグによるソートを無効にしています。user.js で並び順を制御している場合などは、これらの行を削除してください。

// 必要にあわせてソートを調整
$.MTAppFieldSort({
  sort: 'title, c:' + lat_basename + ', c:' + lng_basename + ', c:' + zoom_basename
});
jQuery('#customfield_' + lat_basename + '-field, #customfield_' + lng_basename + '-field, #customfield_' + zoom_basename + '-field')
  .removeClass('sort-enabled')
  .wrapAll('
');

なお、user.css に追記する内容は下記のとおりです。
既に任意のスタイル定義をしている場合は、行末あたりにコピー&ペーストでよいかもしれません。要素の ID 名を変更した場合は、調整をお忘れなく。。。

#gmap {
  width: 100%;
  height: 300px;
  background: #ddd;
}
#map-wrapper:after,
#map-serach-box:after {
  display: table;
  content: " ";
  clear: both;
}
#map-wrapper > div.field {
  width: 39%;
  float: left;
  margin-right: 1%;
}
#map-wrapper > div.field:last-child {
  width: 20%;
  margin-right: 0;
}
#map-serach-box {
  padding: 0.5em 0 1em;
}
#map-serach-box input {
  width: 70%;
  float: left;
  margin-right: 1%;
}
#map-serach-box button {
  float: right;
  font-size: 12px;
}

プラグイン設定の調整

最後に MTAppjQuery のプラグイン設定へ script タグを2つ追加します。

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/PATHtoMT/mt-static/plugins/MTAppjQuery/user-files/GoogleMaps.js"></script>

2行目にある mt-static のパスは、適宜修正してください。

img-bun131215_03.png

個人的には、必要に応じて直後に読み込まれる user.js でゴニョゴニョできるので「変数 mtapp_html_foot に追加(MTAppjQueryのuser.jsの直前)」にセットするのがオススメです。

問題なく設定できていれば、(ブログ)記事の編集画面に Google マップが表示されます。

補足

出力する際は、テンプレートの任意の場所へ従来のカスタムフィールドと同様に MT タグを記述します。


上記は、拙作の jQuery Google Maps プラグインで表示させる場合のサンプルです。
複数マーカーの表示なども比較的簡単に実装できると思うので、よかったら使ってみてください。

jQuery Google Maps プラグイン
http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/

お気づきの点などがありましたら、@BUN へご連絡ください。
それでは、また1年後...(。-_-。) <マテ

コメントフォーム

トラックバック(0)

トラックバックURL : https://gabs.cc/mt/mt-tb.cgi/tb
※お手数ですが、上記URLの「tb」を「64」に置き換えてPingを送信してください。