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'; // フォーム送信前に地図を非表示にする
}
});
});
})();
以下がフォームになります。