WordPressのコンタクトフォーム７にて送信者の位置情報を送らせたい

締切済

質問者：qjcyp
質問日時：2022/09/14 23:28
回答数：2件

WordPressのコンタクトフォーム７にて送信者の位置情報を送らせたいのですが、
以下のコードを独自タグ作成し、コンタクトフォーム７にて利用出来るようにすることは出来ませんでしょうか？
<body>
<button type="button" id="get-gps">位置情報取得</button>
<p id="lat">緯度: </p>
<p id="lon">経度: </p>
<p id="address"></p>
</body>
<script>
/** 変換表を入れる場所 */
var GSI = {};

const latEle = document.querySelector('#lat');
const lonEle = document.querySelector('#lon');
const addressEle = document.querySelector('#address');
const gpsButton = document.querySelector('#get-gps');
/**
* 緯度経度を画面表示
*/
const setGeoLoc = (coords) => {
latEle.textContent = `緯度: ${coords.latitude}`;
lonEle.textContent = `経度: ${coords.longitude}`;
}
/**
* 緯度経度から住所を取得して表示
*/
const getAddress = async (coords) => {
// 逆ジオコーディング API
const url = new URL('https://mreversegeocoder.gsi.go.jp/reverse-geoco …
url.searchParams.set('lat', coords.latitude);
url.searchParams.set('lon', coords.longitude);
const res = await fetch(url.toString());
const json = await res.json();
const data = json.results;

// 変換表から都道府県などを取得
const muniData = GSI.MUNI_ARRAY[json.results.muniCd];
// 都道府県コード,都道府県名,市区町村コード,市区町村名に分割
const [prefCode, pref, muniCode, city] = muniData.split(',');

// 画面に反映
address.textContent = `${pref} ${city} ${data.lv01Nm}`;
};
/**
* 位置情報 API の実行(イベントリスナ)
*/
gpsButton.addEventListener('click', () => {
navigator.geolocation.getCurrentPosition(
geoLoc => {
setGeoLoc(geoLoc.coords);
getAddress(geoLoc.coords);
},
err => console.error({err}),
);
});
</script>
<script src="https://maps.gsi.go.jp/js/muni.js"></script>