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 を押してください。

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