|
|
| (同じ利用者による、間の8版が非表示) |
| 1行目: |
1行目: |
| // 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=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
| |
| });
| |
| });
| |
| };
| |
| }
| |
|
| |
| // DOM準備後に実行
| |
| if (document.readyState === "loading") {
| |
| document.addEventListener("DOMContentLoaded", initGoogleMaps);
| |
| } else {
| |
| initGoogleMaps();
| |
| }
| |
| })();
| |
