プリザンターに地図(GoogleMap)を表示させる

調べてみたら2017年からPleasanterにはお世話になっているのでOSS精神に則って小粒ではありますが作ったネタを公開していこうかと思います。…いつまで続くかな？

住所録などを作成した時、視覚的に地図があればわかりやすいのにといったケースがあるかと思います。
しかしわざわざ別途GoogleMapで埋込用のタグを生成するのもめんどくさい。
ということで住所をポンと入れるだけで追加の手間なく地図を表示できるスクリプトを作りました。

//住所を入力するフォームの名前を指定
var address = 'DescriptionA';
//地図を表示するフォームの名前を指定
var target = 'DescriptionB';

showMap = function () {
 // タグ生成
 var mapTag = '<iframe src="https://maps.google.co.jp/maps?output=embed&q=' + $p.getControl(address).val() + '&z=15" width="100%" height="500" loading="lazy"></iframe>';
 // 表示対象フォームにタグ挿入
 $p.getControl(target).parent().html(mapTag);
}

showMap();

このコードをスクリプトに登録して出力先を「編集」として下さい。
また、今回は「説明A」と「説明B」をそれぞれ住所と地図表示に使いましたがaddressとtargetのフォーム名は実際のテーブル設計にあわせて書き換えて下さい。以上です。

利用者は住所を入力するだけです。

これだけで地図を表示することができました。