新しいフォームに対応したjavascript

[cotton]

以下のGithubにあるjavascriptは旧バージョンのフォーム（formbridge）に対応したコードになっています。

formbridge-location-picker.js

新しいバージョンのフォームに対応したコードをchatGPTに書いてもらったのですが、地図は表示されません。
javascriptは初心者のため、詳しい方がいらっしゃいましたら解決方法を教えていただけますと幸いです。
以下のフォームが書き直したものです。

Public Form

[puppet]

ご提示のPublicFormをクリックするとこんな感じで地図が表示されました。
もしかすると @cotton さんがお使いのブラウザ設定や拡張機能等で制限が入っているのかもしれません。

[cotton]

私が最初に投稿したURLが旧バージョンのフォームでした。
申し訳ございません。以下のURLが新しいバージョンのフォームです。

Public Form

[puppet]

formbridgeのリファレンスを見ると、イベントの書き方が変わっているのだと思います。
こちらのページを参考にまずはイベントを書き直してみてください。

具体的には63行目のような

fb.events.form.submit = //～

を

formBridge.events.on('form.submit', function (context) { //～

に変更する感じです。

[cotton]

イベントの書き方を変更したところ、地図が表示されました。ありがとうございました！

(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);
  }

  // フォームが表示された後の処理 (新しいイベント方式)
  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);
    }, function(error) {
      console.error("Geolocation error: " + error.message);
      setupMap(mapDiv, defaultLat, defaultLng);
    });
  });

  // フォームが送信される前の処理 (新しいイベント方式)
  formBridge.events.on('form.submit', function (context) {
    var mapElement = document.getElementById('map');
    if (mapElement) {
      mapElement.style.display = 'none';
    }
  });

  // 緯度と経度をフォームに設定し、changeイベントを発火させる関数
  function updateFormFields(lat, lng) {
    var latitudeField = formBridge.getElementByCode('latitude');
    var longitudeField = formBridge.getElementByCode('longitude');

    if (latitudeField && longitudeField) {
      var latitudeInput = latitudeField.getElementsByTagName('input')[0];
      var longitudeInput = longitudeField.getElementsByTagName('input')[0];

      latitudeInput.value = lat.toFixed(6);
      longitudeInput.value = lng.toFixed(6);

      var event = new Event('change', { bubbles: true });
      latitudeInput.dispatchEvent(event);
      longitudeInput.dispatchEvent(event);
    }
  }

})();