メニューを切り替える
個人設定メニューを切り替える
個人メニューを切り替える
ログインしていません
編集を行うと、IPアドレスが公開されます。

「MediaWiki:Citizen.js」の版間の差分

MediaWikiインターフェイスページ
編集の要約なし
編集の要約なし
1行目: 1行目:
// GoogleMap表示
// GoogleMap表示
(function() {
(function() {
    // ページ読み込み時に処理
     function initGoogleMaps() {
     function initGoogleMaps() {
        // .googlemap があるかチェック
         var maps = document.querySelectorAll('.googlemap');
         var maps = document.querySelectorAll('.googlemap');
         if (maps.length === 0) return;
         if (maps.length === 0) return; // なければ終了


        // マップデータを収集
         var mapData = [];
         var mapData = [];
 
         maps.forEach(function(el, index) {
         maps.forEach(function(el, index){
            // data-coords 属性から座標を取得
             if (!el.dataset.coords) return;
             if (!el.dataset.coords) return;
             var coords = el.dataset.coords.split(',');
             var coords = el.dataset.coords.split(',');
             if (coords.length !== 2) return;
             if (coords.length !== 2) return;


             el.id = 'googlemap-' + index; // 個別IDを付与
             el.id = 'googlemap-' + index; // 個別ID
             mapData.push({
             mapData.push({
                 id: el.id,
                 id: el.id,
24行目: 23行目:
         if (mapData.length === 0) return;
         if (mapData.length === 0) return;


         // Google Maps API を読み込み
         // APIがまだ読み込まれていなければ読み込む
         var script = document.createElement('script');
         if (!window.google || !window.google.maps) {
        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&callback=renderMaps';
            var script = document.createElement('script');
        script.async = true;
            script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=renderMaps';
        document.body.appendChild(script);
            script.async = true;
            document.body.appendChild(script);
        } else {
            renderMaps(); // API既に読み込み済みなら直接描画
        }


         // API読み込み後にマップを描画
         // 描画関数
         window.renderMaps = function() {
         window.renderMaps = function() {
             mapData.forEach(function(data){
             mapData.forEach(function(data) {
                 var map = new google.maps.Map(document.getElementById(data.id), {
                 var map = new google.maps.Map(document.getElementById(data.id), {
                     center: {lat: data.lat, lng: data.lng},
                     center: {lat: data.lat, lng: data.lng},
45行目: 48行目:
     }
     }


     // DOMContentLoaded 後に初期化
     // DOM準備後に実行
     if (document.readyState === "loading") {
     if (document.readyState === "loading") {
         document.addEventListener("DOMContentLoaded", initGoogleMaps);
         document.addEventListener("DOMContentLoaded", initGoogleMaps);
52行目: 55行目:
     }
     }
})();
})();
// 郵便番号から住所自動入力
(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("住所取得に失敗しました。");
          });
      }
    });
  });
});

2025年10月24日 (金) 11:07時点における版

// GoogleMap表示
(function() {
    function initGoogleMaps() {
        // .googlemap があるかチェック
        var maps = document.querySelectorAll('.googlemap');
        if (maps.length === 0) return; // なければ終了

        // マップデータを収集
        var mapData = [];
        maps.forEach(function(el, index) {
            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;

        // APIがまだ読み込まれていなければ読み込む
        if (!window.google || !window.google.maps) {
            var script = document.createElement('script');
            script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=renderMaps';
            script.async = true;
            document.body.appendChild(script);
        } else {
            renderMaps(); // 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
                });
            });
        };
    }

    // DOM準備後に実行
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initGoogleMaps);
    } else {
        initGoogleMaps();
    }
})();