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

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

MediaWikiインターフェイスページ
編集の要約なし
編集の要約なし
1行目: 1行目:
(function() {
(function() {
     console.log("Citizen.js loaded");
     console.log("Citizen Google Maps JS loaded");
 
    // ページ読み込み時に処理
    function initGoogleMaps() {
        var maps = document.querySelectorAll('.googlemap');
        if (maps.length === 0) return;
 
        var mapData = [];


    function handleNewMaps(maps) {
         maps.forEach(function(el, index){
         maps.forEach(function(el, index){
             console.log("Map element found:", el, el.dataset.coords);
             // 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())
            });
         });
         });
    }


    // DOMの変化を監視
        if (mapData.length === 0) return;
    var observer = new MutationObserver(function(mutationsList) {
 
         mutationsList.forEach(function(mutation) {
        // Google Maps API を読み込み
             mutation.addedNodes.forEach(function(node) {
        var script = document.createElement('script');
                 if (node.nodeType === 1 && node.matches('.googlemap')) {
        script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&callback=renderMaps';
                     handleNewMaps([node]);
        script.async = true;
                 }
        document.body.appendChild(script);
                 if (node.querySelectorAll) {
 
                     handleNewMaps(node.querySelectorAll('.googlemap'));
        // 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
                 });
             });
             });
         });
         };
     });
     }


     observer.observe(document.body, { childList: true, subtree: true });
     // DOMContentLoaded 後に初期化
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initGoogleMaps);
    } else {
        initGoogleMaps();
    }
})();
})();

2025年10月23日 (木) 20:22時点における版

(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();
    }
})();