a-blog cmsで、地図カスタムフィールド内のGoogleMapsを自動的に起動させる

背景

a-blog cmsをかなり利用している人でなければわからないことですが…
a-blog cmsには、Google Maps経由のUIで位置情報を入力できるカスタムフィールドがあります。

このフィールドは、バージョン2.6.1の時点で、入力された内容によって投稿画面を表示したときの挙動が異なります。

• 新規投稿のとき、またはフィールドが未入力のエントリーを編集するとき
  • スタティックマップを表示し、マップをクリックしたときにダイナミックマップを表示する
• フィールドが入力済のエントリーを編集するとき
  • 自動的に入力内容に沿ったダイナミックマップを表示する

「クリックしなければ起動しない」ということが投稿画面内に明示されていないのが悩ましいところです。

これを自動的に起動するようにできたので、次のバージョンでconfig.jsで選択できるようになることに期待しつつ、参考までにシェアします。

※a-blog cmsコアの、圧縮されたJavaScriptコードを編集します。荒っぽい方法となるため、内容の完全保証はできません。JavaScriptの知識があり、UX方面で気になった人だけ試してみてください。

手順

下記のファイルをエディタで開いてください。

/js/dispatch/edit/map.js

そして、以下の内容でファイル内を検索してください。8行目あたりでヒットします。

if($lat.val().length&&$lng.val().length)activate();else $img.click(function(){if(!$lat.val().length)$lat.val(latlng[0]);if(!$lng.val().length)$lng.val(latlng[1]);if($zoom.size())$zoom.val(zoom);activate()});

このコードを展開すると以下のようになります。

if($lat.val().length&&$lng.val().length)activate();
else {
    $img.click(function(){
        if(!$lat.val().length)$lat.val(latlng[0]);
        if(!$lng.val().length)$lng.val(latlng[1]);
        if($zoom.size())$zoom.val(zoom);
        activate()
    });
}

これを、以下のようにクリックイベントから出した状態にして更新してください（else文から出してはいけません）。

if($lat.val().length&&$lng.val().length)activate();
else {
    if(!$lat.val().length)$lat.val(latlng[0]);
    if(!$lng.val().length)$lng.val(latlng[1]);
    if($zoom.size())$zoom.val(zoom);
    activate();
}

キャッシュをクリアして投稿画面を表示し、自動的に起動することを確認してください。