前提・実現したいこと
ジオロケーションとスプレッドシートを用いてマップを作っています。
ジオロケーションで現在地の検索→スプレッドシートに記入した座標、コメントをマーカー、吹き出し表示するものです。
参考にしたもの:リンク内容
発生している問題・エラーメッセージ
ジオロケーションは実行されるのですが、スプレッドシートの読み取りが行われないです。 エラーも出ないのでどこが間違っているのか分からないです。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <title>Google Maps My List</title> <meta charset="utf-8"> <style> #header { font-family: Meriyo UI; font-size: 14px; color: white; font-weight: bold; background-color: darkblue; padding: 3px; width: 1750px; border: 1px outset gray; } #target { border: 1px outset gray; width: 1400px; height: 900px; } #sidebar { border: 1px solid #666; padding: 6px; background-color: white; font-family: Meriyo UI; font-size: 12px; overflow: auto; width: 337px; height: 888px; } #tag { font-size: 16px; height: 30px; } #getTag { font-size: 16px; width: 200px; color: #fff; background: green; border-radius: 5px; height: 30px; } </style> </head> <body> <div id="header">地域包括ケアシステムマップ</div> <br> <div> <select id="tag"> <option value="0">0.ALL</option> <option value="1">1.地域包括支援システム1</option> <option value="2">2.地域包括支援システム2</option> </select> <button id="getTag">タグの絞込み</button> </div> <table> <tr> <td><div id="target"></div></td> <td><div id="sidebar"></div></td> </tr> </table> <script src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=AIzaSyDexXnvpRB8rLjKLaHTMv5BiJZDukg5RAA&callback=initMap" async defer></script> <script> let marker = []; let infoWindow = []; let markerData = []; // 地図初期表示 function initMap() { const target = document.getElementById('target'); map = new google.maps.Map(target, { center: centerp={lat: 37.67229496806523, lng: 137.88838989062504}, zoom: 5, }); //ジオロケーションを用いた現在地の検索 infoWindow = new google.maps.InfoWindow(); const locationButton = document.createElement("button"); locationButton.textContent = "現在地を探す"; locationButton.classList.add("custom-map-control-button"); map.controls[google.maps.ControlPosition.TOP_CENTER].push( locationButton ); locationButton.addEventListener("click", () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const pos = { lat: position.coords.latitude, lng: position.coords.longitude, }; infoWindow.setPosition(pos); infoWindow.setContent("現在地"); infoWindow.open(map); map.setCenter(pos); }, () => { handleLocationError(true, infoWindow, map.getCenter()); } ); } else { handleLocationError(false, infoWindow, map.getCenter()); } }); function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent( browserHasGeolocation ? "Error: 現在地の取得に失敗しました" : "Error: このブラウザはジオロケーションに対応していません" ); infoWindow.open(map); }; } // Function:地図データの取得 function getMapdata(){ //APIにてデータを取得して、位置とマーカーをセットするfunctionを呼び出す const request = new XMLHttpRequest(); // const bookid = '1u5WUNdNBh6Bz7seBveRa4g625oZmw0n-etC0-8ZzlcE'; // Googleフォームから書き込むスプレッドシートのID const sheetname = 'フォームの回答 2'; // Googleフォームで作成されるフォーム名 // const googleapi = 'AIzaSyDexXnvpRB8rLjKLaHTMv5BiJZDukg5RAA'; const url = 'https://sheets.googleapis.com/v4/spreadsheets/' + bookid + '/values/' + sheetname + '?key=' + googleapi; request.open('GET', url, true); request.responseType = 'json'; request.onload = function () { const data = this.response; // 取得できた値を格納 console.log(data); markerData = parseData(data); // Function:データ変換 console.log(markerData); setData(markerData); // Function:位置とマーカーをセット }; request.send(); } // Function:データ変換 function parseData(data) { const keys = data.values[0]; const parsemarkerData = []; data.values.forEach(function(value, i) { if (i > 0) { const hash = {}; value.forEach(function(d, j) { hash[keys[j]] = d; }); parsemarkerData.push(hash); } }); return parsemarkerData; } // Function:位置とマーカーをセット function setData(markerData){ // 初期化 let sidebar_html = ""; marker = []; for (let i = 0; i < markerData.length; i++) { // マーカー位置のセット const markerLatLng = new google.maps.LatLng({ lat: Number(markerData[i]['lat']), lng: Number(markerData[i]['lng']) }); // マーカーのセット marker[i] = new google.maps.Marker({ position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 // icon: icon // アイコン指定 }); // 吹き出しへのデータセット const tag = markerData[i]['tag']; const name = markerData[i]['name']; const timestamp = markerData[i]['タイムスタンプ']; // let setHtml; // setHtml = tag + '<br><br>' + name + '<br><br>'; // // 吹き出しのセット infoWindow[i] = new google.maps.InfoWindow({ content: setHtml }); // サイドバーのデータセット sidebar_html += '<a href="javascript:myclick(' + i + ')">' + tag + ' : ' + name + '(' + timestamp + ')' + '</a><br>'; // Function:マーカーにクリックイベントを追加 markerEvent(i); } // サイドバーへの書き出し document.getElementById("sidebar").innerHTML = 'Googleスプレッドシートデータ<br><br>' + sidebar_html; } // Function:マーカーにクリックイベントを追加 function markerEvent(i) { marker[i].addListener('click', function() { myclick(i); // Function: 吹き出しのオープン・クローズ }); } // Function: 吹き出しのオープン・クローズ let openWindow; function myclick(i) { if(openWindow){ openWindow.close(); } infoWindow[i].open(map, marker[i]); openWindow = infoWindow[i]; } // 絞り込みボタンが押下されたとき const tagBtn = document.getElementById('getTag'); tagBtn.addEventListener('click', function(){ const tag = document.getElementById('tag').value; const tagmarkerData = []; let j = 0; for (let i = 0; i < markerData.length; i++) { if (tag === markerData[i]['tag'].charAt(0)) { tagmarkerData[j] = markerData[i]; j++; } if (tag === '0') { tagmarkerData[i] = markerData[i]; } } // 地図の初期表示 const target = document.getElementById('target'); const centerp = {lat: 37.67229496806523, lng: 137.88838989062504}; map = new google.maps.Map(target, { center: centerp, zoom: 5, }); // Function:位置とマーカーをセット(タグを絞り込みしたデータ) setData(tagmarkerData); }); </script> </body> </html>
試したこと
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/27 01:46