緯度経度取得のJavaScript

Formbridgeのフォーム上で地図を開き、
緯度と経度を取得、フォームに自動入力したいです。
以下のコードを作成しましたが、地図は表示され、位置情報を取得できても、
緯度と経度はフォームに入力されないようです。

解決方法を教えてください。

(function() {
  "use strict";

  // パラメータ設定
  var useOpenStreetMap = true; // trueでOpenStreetMapを使用、falseで国土地理院の地図を使用
  var defaultLat = 35.681236; // デフォルトの緯度 東京駅:35.681236
  var defaultLng = 139.767125; // デフォルトの経度 東京駅:139.767125
  var initialZoomLevel = 17; // 初期ズームレベル
  var mapHeight = '400px'; // 地図の高さ
  var mapWidth = '100%'; // 地図の横幅
  var tileLayerURL = useOpenStreetMap
                      ? 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' // OpenStreetMapのタイルレイヤーURL
                      : 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'; // 国土地理院のタイルレイヤーURL
  var maxZoomLevel = 19; // 最大ズームレベル
  var attribution = useOpenStreetMap
                      ? 'Map data c <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>'
                      : 'c <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'; // 地図データの帰属表示

  // 地図のコンテナ要素を作成する関数
  function createMapContainer() {
    var mapDiv = document.createElement('div');
    mapDiv.id = 'map';
    mapDiv.style.height = mapHeight;
    mapDiv.style.width = mapWidth;
    return mapDiv;
  }

  // 地図を設定する関数
  function setupMap(mapDiv, initialLat, initialLng) {
    var map = L.map(mapDiv.id).setView([initialLat, initialLng], initialZoomLevel);
    L.tileLayer(tileLayerURL, {
      maxZoom: maxZoomLevel,
      attribution: attribution
    }).addTo(map);

    var marker = L.marker([initialLat, initialLng], {draggable: true}).addTo(map);
    marker.on('dragend', function(event) {
      var position = marker.getLatLng();
      updateFormFields(position.lat, position.lng);
    });

    updateFormFields(initialLat, initialLng);
  }

  // 緯度と経度をフォームに設定し、context.setFieldValueを使って値を設定する関数
  function updateFormFields(lat, lng) {
    formBridge.events.on('form.show', function (context) {
      if (context && typeof context.setFieldValue === 'function') {
        context.setFieldValue('latitude', lat.toFixed(6));  // 緯度を設定
        context.setFieldValue('longitude', lng.toFixed(6)); // 経度を設定
        console.log("緯度と経度がフォームに設定されました:", lat.toFixed(6), lng.toFixed(6));
      } else {
        console.error('context.setFieldValue が存在しません');
      }
    });
  }

  // DOMの読み込み完了を待つ
  document.addEventListener('DOMContentLoaded', function() {
    // フォームが表示された後の処理
    formBridge.events.on('form.show', function (context) {
      // 地図をフォームの最初に挿入
      var mapDiv = createMapContainer();
      var formContent = document.getElementsByClassName('fb-custom--content')[0];
      formContent.insertBefore(mapDiv, formContent.firstChild);

      // ユーザーの現在位置を取得して地図を設定
      navigator.geolocation.getCurrentPosition(function(position) {
        setupMap(mapDiv, position.coords.latitude, position.coords.longitude);
        // 地図が設定された後にフォームに緯度と経度を設定
        updateFormFields(position.coords.latitude, position.coords.longitude);
      }, function(error) {
        console.error("Geolocation error: " + error.message);
        setupMap(mapDiv, defaultLat, defaultLng);
        // デフォルト位置でフォームを設定
        updateFormFields(defaultLat, defaultLng);
      });
    });

    // フォームが送信される前の処理
    formBridge.events.on('form.submit', function (context) {
      var mapElement = document.getElementById('map');
      if (mapElement) {
        mapElement.style.display = 'none'; // フォーム送信前に地図を非表示にする
      }
    });
  });
})();

以下がフォームになります。

マーカーの dragend イベントでこの関数を呼んでいると思いますが、この関数の中身は Form Bridge の form.show イベントのハンドラ登録処理になっているので、実際にはそのタイミングで動いていないように見えます。

とはいえ

document.querySelector('[data-field-code=latitude] input').value = position.lat.toFixed(6);

とかやっても、見た目上変わるだけで form.submit イベントで context.getRecord() すると値が入ってなかったりするので、どこかのイベントから context を引っ張ってきて使うしかないのかな…と思います。