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

2025年10月30日 (木) 17:56時点における版

// GoogleMap表示
(function() {
    function initGoogleMaps() {
        document.querySelectorAll(".map-embed").forEach(function (el) {
            const name = el.dataset.name;
            if (!name) return;

            const src = `https://www.google.com/maps/embed/v1/place?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&q=${encodeURIComponent(name)}&zoom=16&maptype=roadmap&language=ja&region=JP`;

            const iframe = document.createElement("iframe");
            iframe.width = "100%";
            iframe.height = "400";
            iframe.style.border = "0";
            iframe.loading = "lazy";
            iframe.allowFullscreen = true;
            iframe.referrerPolicy = "no-referrer-when-downgrade";
            iframe.src = src;

            el.innerHTML = "";
            el.appendChild(iframe);
        });
    }

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

@@ 2行目: / 2行目: @@
 (function() {
      function initGoogleMaps() {
-         // .googlemap があるかチェック
+         document.querySelectorAll(".map-embed").forEach(function (el) {
-        var maps = document.querySelectorAll('.googlemap');
+            const name = el.dataset.name;
-        if (maps.length === 0) return; // なければ終了
+            if (!name) return;
-        // マップデータを収集
+            const src = `https://www.google.com/maps/embed/v1/place?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&q=${encodeURIComponent(name)}&zoom=16&maptype=roadmap&language=ja&region=JP`;
-        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
+             const iframe = document.createElement("iframe");
-             mapData.push({
+            iframe.width = "100%";
-                id: el.id,
+            iframe.height = "400";
-                lat: parseFloat(coords[0].trim()),
+            iframe.style.border = "0";
-                lng: parseFloat(coords[1].trim())
+            iframe.loading = "lazy";
-             });
+             iframe.allowFullscreen = true;
+            iframe.referrerPolicy = "no-referrer-when-downgrade";
+            iframe.src = src;
+            el.innerHTML = "";
+             el.appendChild(iframe);
          });
-        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=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&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
-                });
-            });
-        };
      }