MediaWiki:Citizen.js

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

• Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
• Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
• Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください。

// GoogleMap表示
(function() {
    console.log("Citizen Google Maps JS loaded");

    // ページ読み込み時に処理
    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();
    }
})();

// 郵便番号から住所自動入力
document.addEventListener("DOMContentLoaded", 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("住所取得に失敗しました。");
          });
      }
    });
  });
});