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

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

そこで、「Web creators 2009年2月号」を参考にし、Movable Typeの記事投稿画面をカスタマイズ。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);
    });
  }
}