Movable Typeの記事投稿画面にGoogle Mapsを表示

Movable Typeの記事ページにGoogle Mapsを表示させたい方は、「Movable Typeで記事ページにGoogle Mapを表示させる」をご覧ください。

Shimalogに写真を掲載する際、撮影場所をGoogleマップで示すために緯度・経度を入力しているのですが、毎回他のサイトで緯度・経度を調べてコピーしてくるのがとても手間でした。

そこで、「Web creators 2009年2月号」を参考にし、Movable Typeの記事投稿画面をカスタマイズ。Google Mapsを表示し、マーカーで指定した撮影場所の緯度・経度を、カスタムフィールドに自動入力するようにしました。

カスタマイズは、MTのブログ記事編集画面のテンプレートにGoogle Maps APIと地図をロードする処理などを記述するだけで完了します。

当サイトの場合、Shimalogで示すポイントは全て沖縄県内なので、デフォルトで沖縄県全域がGoogle Mapsで表示されるように設定したこと。同じウインドウ内でスピーディーに地図を操作でき、なおかつ値が自動で入るのは大変快適です。

管理画面のカスタマイズ方法

MTのブログ記事編集画面のテンプレートである/mt/tmpl/cms/edit_entry.tmplを、/mt/alt-tmpl/cms/内にコピーします。そして、変数js_include（<mt:setvarblock name="js_include" append="1">のように書かれている部分）内に、Google Maps API、地図を表示するスクリプト（下記にサンプルを掲載）をロードするように記述します。

Googleマップを表示させ、緯度・経度を自動入力するスクリプト

JavaScriptはまだまだ勉強中ですが...。

window.onload = function(){
 //Googleマップを表示する要素を作成
 var elem = document.createElement('div');
 elem.setAttribute('id', 'mapArea');
 
 //カスタムフィールドを表示する要素内に作成要素を追加
 document.getElementById('customfield_longitude-field').appendChild(elem);
 
 //マップのロード
 gmapLoad();
}

function gmapLoad(){
 if (GBrowserIsCompatible()){
 var zoom;
 var center;
 var entryLat = document.getElementById('customfield_latitude').value;
 var entryLng = document.getElementById('customfield_longitude').value;
 
 //Googleマップの準備
 var map = new GMap2(document.getElementById('mapArea'));
 map.addControl(new GLargeMapControl()); 
 map.enableScrollWheelZoom();
 map.enableContinuousZoom();
 
 if(entryLat == '' && entryLng == ''){
 //緯度・経度が未入力の場合は、既定の地点を中央にセット
 center = new GLatLng(25.383735, 125.958252);
 zoom = 7;
 } else {
 //緯度・経度が入力済みの場合は、その地点を中央にセット
 center = new GLatLng(entryLat, entryLng);
 zoom = 15;
 }
 map.setCenter(center, zoom);
 
 //マーカーをセット
 var markerArrow = new GIcon();
 markerArrow.image = "http://maps.google.com/intl/ja_jp/mapfiles/arrow.png";
 markerArrow.shadow = "http://maps.google.com/intl/ja_jp/mapfiles/arrowshadow.png";
 markerArrow.size = new GSize(39, 34);
 markerArrow.shadowSize = new GSize(39, 34);
 markerArrow.iconAnchor = new GPoint(12, 34);
 var marker = new GMarker(center, {draggable:true, icon:markerArrow, bouncy:false});
 map.addOverlay(marker);
 
 //マーカーをドラッグ＆ドロップした際に、
 //カスタムフィールドに緯度・経度を入力するイベントをセット
 GEvent.addListener(marker, "dragend", function(){
 var point = marker.getLatLng();
 document.getElementById('customfield_latitude').value = point.lat();
 document.getElementById('customfield_longitude').value = point.lng();
 map.setCenter(point);
 });
 }
}