MTAppGoogleMapFields

記事編集画面で、座標フィールドの直後に Google マップを表示し、地図の中心座標（緯度・経度・ズーム）をそのフィールドへ保存する静的メソッドです。住所欄と連携させると、住所からのジオコーディング検索ボタンを追加します。最新の Maps JavaScript API（google.maps.importLibrary による動的読み込みと AdvancedMarkerElement）を使用します。

構文

$.MTAppGoogleMapFields(options);

静的メソッド（$.MTAppGoogleMapFields(...)）です。

パラメータ

options {Object} — basename は必須。以下のプロパティを持ちます。

戻り値

なし（undefined）。記事編集画面以外・basename が null・Maps API（importLibrary）未読み込みのときは何もしません（未読み込み時はコンソールに警告）。

保存される値

緯度,経度,ズーム 形式の文字列が保存されます（例: 35.681,139.767,14）。地図の操作が落ち着く（idle）たびに、その時点の中心座標とズームがフィールドへ書き戻されます。

使用例

住所欄と連携（カスタムフィールド）

$.MTAppGoogleMapFields({
    basename: 'map',
    custom: true,
    address: '#customfield_address'
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $.MTAppGoogleMapFields({
            basename: 'map',
            custom: true,
            address: '#customfield_address'
        });
    }
})(jQuery);

自前の Map ID と初期座標を指定

$.MTAppGoogleMapFields({
    basename: 'map',
    custom: true,
    mapId: 'YOUR_MAP_ID',
    mapPosition: [34.6937, 135.5023, 15]
});

生成される HTML

座標フィールドは非表示になり、そのフィールドコンテナの直後に地図用の div が追加されます。address を指定した場合は、座標フィールドのヘッダーに検索ボタン（a.update-map）が追加されます。

<div id="customfield_map-field" class="field …">…（座標フィールドは hide）…</div>
<div id="customfield_map_gmap" style="width:100%;height:400px;…"></div>  <!-- 地図 -->

Maps JavaScript API の読み込み（前提）

本メソッドは Maps JavaScript API を自前で読み込みません。管理画面側であらかじめ読み込んでおく必要があります。 未読み込みのときは何もせず、コンソールに警告を出します。

貼り付け場所

MTAppjQuery のプラグイン設定にある「自由テキストエリア」→「変数 html_head に追加（mt.js の直前）」に、ローダーの <script> を貼り付けます。

管理画面には html_head（ローダー）→ MTAppjQuery-min.js → user.js の順で出力されるため、user.js が動くときには google.maps.importLibrary が定義済みになります。

ローダー

Google 公式ドキュメントの「動的ライブラリの読み込み（Dynamic Library Import）」に掲載されているブートストラップコードをそのまま貼り、設定オブジェクトの key を自分の API キーに置き換えます。

<script>
  (g => { /* ← 公式ドキュメントのブートストラップ本体をそのままコピーする */ })({
    key: "YOUR_API_KEY",
    v: "weekly"
  });
</script>

このブートストラップは google.maps.importLibrary を同期的に定義するため、user.js の実行時点で必ず利用できます。<script src="...maps/api/js?key=..."> を async で読み込む方法では、user.js の実行時にまだ google が未定義で本メソッドが何もせずに終わることがあります。

⚠️ API キーは管理画面の HTML に出力されます。 必ず「HTTP リファラー」制限と「API の制限」をかけたキーを使ってください（手順は後述）。

必要な API

読み込むライブラリはオプションによって変わります。

補足

• マーカーは AdvancedMarkerElement を使います。これには地図に Map ID が必要なため mapId を必ず付与します（既定の DEMO_MAP_ID は試作用。本番では固有の Map ID を指定してください）。
• 地図の中心が変わるとマーカーが中心へ追従し（marker.position を更新）、操作が落ち着く（idle）たびに 緯度,経度,ズーム の形式でフィールドへ書き戻します。
• address 指定時は「『（住所欄ラベル）』から地図を表示」ボタンを追加し、Geocoder で住所から座標を求めて地図とマーカーを移動します。検索失敗時は状態に応じた警告を表示します。
• 記事編集画面（edit-entry）でのみ動作します。
• 地図が表示されないときは debug: true を付けて座標フィールドを表示し、地図を動かすと 緯度,経度,ズーム が書き換わるかを確認します。値が更新されない場合はブラウザのコンソールで Maps API のエラー（キーの制限、API 未有効化など）を確認してください。

API キーの取得（2026-07-09 時点）

⚠️ 以下は 2026-07-09 時点 の手順です。Google Cloud Console の UI・名称・要件（課金や必要 API）は変更されることがあるため、実施前に必ず下部の公式ドキュメントで最新手順を確認してください。

1. Google Cloud Console でプロジェクトを作成（または選択）し、課金アカウントを有効化する（Maps Platform はデモ用途を除き課金アカウントが必須）。
2. 「API とサービス」→「ライブラリ」で Maps JavaScript API を有効化する。住所からのジオコーディング検索（address オプション）を使う場合は Geocoding API も有効化する。
3. 「API とサービス」→「認証情報」→「認証情報を作成」→「API キー」でキーを発行する。
4. 発行したキーを編集して制限をかける（強く推奨）。アプリケーションの制限は「HTTP リファラー」で管理画面のドメインを許可し、API の制限は上で有効化した API（Maps JavaScript API／Geocoding API）に限定する。
5. 本番のマーカー用に固有の Map ID を作成する。Cloud Console の「地図の管理（Map Management）」で JavaScript 用の Map ID を作成し、mapId オプションに指定する（試作・確認時は DEMO_MAP_ID を使える）。
6. 取得したキーで Maps JavaScript API を読み込む（前掲「Maps JavaScript API の読み込み（前提）」を参照）。

公式ドキュメント（最新はこちらを参照）:

• API キーの取得: https://developers.google.com/maps/documentation/javascript/get-api-key
• Cloud プロジェクトの設定: https://developers.google.com/maps/documentation/javascript/cloud-setup
• Map ID の作成: https://developers.google.com/maps/documentation/javascript/map-ids/get-map-id

関連

• MTAppShowHint — フィールドにヒント（吹き出し）を表示する。
• MTAppCustomize — フィールドのラベルやヒントをまとめてカスタマイズする。