|
|
| (同じ利用者による、間の10版が非表示) |
| 1行目: |
1行目: |
| // GoogleMap表示
| |
| (function() {
| |
| // ページ読み込み時に処理
| |
| function initGoogleMaps() {
| |
| var maps = document.querySelectorAll('.googlemap');
| |
| if (maps.length === 0) return;
| |
|
| |
|
| var mapData = [];
| |
|
| |
| maps.forEach(function(el, index){
| |
| // data-coords 属性から座標を取得
| |
| if (!el.dataset.coords) return;
| |
| var coords = el.dataset.coords.split(',');
| |
| if (coords.length !== 2) return;
| |
|
| |
| el.id = 'googlemap-' + index; // 個別IDを付与
| |
| mapData.push({
| |
| id: el.id,
| |
| lat: parseFloat(coords[0].trim()),
| |
| lng: parseFloat(coords[1].trim())
| |
| });
| |
| });
| |
|
| |
| if (mapData.length === 0) return;
| |
|
| |
| // Google Maps API を読み込み
| |
| var script = document.createElement('script');
| |
| script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&callback=renderMaps';
| |
| script.async = true;
| |
| document.body.appendChild(script);
| |
|
| |
| // API読み込み後にマップを描画
| |
| window.renderMaps = function() {
| |
| mapData.forEach(function(data){
| |
| var map = new google.maps.Map(document.getElementById(data.id), {
| |
| center: {lat: data.lat, lng: data.lng},
| |
| zoom: 16
| |
| });
| |
| new google.maps.Marker({
| |
| position: {lat: data.lat, lng: data.lng},
| |
| map: map
| |
| });
| |
| });
| |
| };
| |
| }
| |
|
| |
| // DOMContentLoaded 後に初期化
| |
| if (document.readyState === "loading") {
| |
| document.addEventListener("DOMContentLoaded", initGoogleMaps);
| |
| } else {
| |
| initGoogleMaps();
| |
| }
| |
| })();
| |
|
| |
| // 郵便番号から住所自動入力
| |
| (function () {
| |
| const zipInputs = document.querySelectorAll(".zipfield");
| |
| const addressInputs = document.querySelectorAll(".addressfield");
| |
|
| |
| zipInputs.forEach((zipInput, i) => {
| |
| const addressInput = addressInputs[i];
| |
| if (!addressInput) return;
| |
|
| |
| zipInput.addEventListener("input", function () {
| |
| const zip = this.value.replace(/[^0-9]/g, "").slice(0, 7);
| |
| this.value = zip;
| |
|
| |
| if (zip.length === 7) {
| |
| fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}`)
| |
| .then(response => response.json())
| |
| .then(data => {
| |
| if (data.results) {
| |
| const r = data.results[0];
| |
| if (r.address1 === "兵庫県" && r.address2 === "川西市") {
| |
| addressInput.value = r.address1 + r.address2 + r.address3;
| |
| } else {
| |
| addressInput.value = "";
| |
| alert("兵庫県川西市以外の住所は対象外です。");
| |
| }
| |
| } else {
| |
| addressInput.value = "";
| |
| alert("該当する住所が見つかりません。");
| |
| }
| |
| })
| |
| .catch(err => {
| |
| console.error(err);
| |
| alert("住所取得に失敗しました。");
| |
| });
| |
| }
| |
| });
| |
| });
| |
| });
| |
