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