「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){ | |||
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; // | 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; | ||
// | // APIがまだ読み込まれていなければ読み込む | ||
var script = document.createElement('script'); | 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() { | 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行目: | ||
} | } | ||
// | // DOM準備後に実行 | ||
if (document.readyState === "loading") { | if (document.readyState === "loading") { | ||
document.addEventListener("DOMContentLoaded", initGoogleMaps); | document.addEventListener("DOMContentLoaded", initGoogleMaps); | ||
| 52行目: | 55行目: | ||
} | } | ||
})(); | })(); | ||
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();
}
})();