質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

Maps javascriptAPIを使って、スプレットシートのデータをグーグルマップに同期させる

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 138

iwata9

score 1

前提・実現したいこと

Maps javascriptAPIを使って、スプリットシートの情報をグーグルマップにリアルたいむで、同期させたいのですが、スプリットシートの情報が出てきません。
GitHubにある、champierre/sheet2gmap のソースコードをほとんどコピーしており、ビジョアルスタジオコードでは、現時点で「問題は、ワークスペースでは、検出されていません」とでています。
APIキーは所得していませんが、ホームページ上では、グーグルマップに緯度経度zoomレベルが記入された通りに出てきており、サイドバーの表示も出ているのですが、その中に、スプレットシートの情報や、グーグルマップに、マーカーも表示されていません。
スプレットシートの取り込み方に問題があるのでしょうか?

発生している問題・エラーメッセージ

Google chromeのF12を押して出てくるconsoleのエラーメッセージです。

ido_keido_zoom.js:40 GET https://sheets.googleapis.com/v4/spreadsheets/$1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQ/values/sheet1? 403
initMap @ ido_keido_zoom.js:40
(anonymous) @ js?&callback=initMap:144
(anonymous) @ js?&callback=initMap:144
Promise.then (async)
Nj @ js?&callback=initMap:144
google.maps.Load @ js?&callback=initMap:14
(anonymous) @ js?&callback=initMap:254
(anonymous) @ js?&callback=initMap:254
ido_keido_zoom.js:7 Uncaught TypeError: Cannot read property '0' of undefined
at parseData (ido_keido_zoom.js:7)

該当のソースコード

HTMLのソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マンション情報</title>
<style>

map{

width:640px;
height:400px;
}

sidebar {

position: absolute;
top: 8%;
left: 57%;
width: 15%;
height: 80%;
border: 1px solid #666;
padding: 6px;
background-color: white;
font-family: Meriyo UI;
font-size: 14px;
}
</style>
</head>
<body>

<p>マンション情報</p>

<div id="map"> </div>
<td><div id="sidebar"></div></td>

<script type="text/javascript" src="ido_keido_zoom.js">    //緯度、経度、ズームレベルを取得するjavascript
</script>  

<script async defer            
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">    //google API取得
</script>

</body>
</html>

javascriptのソースコード
var map;
var marker = [];
var infoWindow = [];
var windowOpened;

function parseData(data) {
var keys = data.values[0];
var markerData = [];
data.values.forEach(function(value, i) {
if (i > 0) {
var hash = {};
value.forEach(function(d, j) {
hash[keys[j]] = d;
});
markerData.push(hash);
}
});
return markerData;
}

function initMap() {
var target = document.getElementById('map');
var centerp = {lat: 35.6679191, lng: 139.4606805};

map = new google.maps.Map(target, {
center: centerp,
zoom: 17,
});

var request = new XMLHttpRequest();
request.open('GET', https://sheets.googleapis.com/v4/spreadsheets/$1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQ/values/sheet1?, true);
request.responseType = 'json';

request.onload = function () {
var data = this.response;
var markerData = parseData(data);
setData(markerData);
};

request.send();
}

function addMarker(i, data) {
var markerLatLng = new google.maps.LatLng({
lat: Number(data['緯度']),
lng: Number(data['経度'])
});
marker[i] = new google.maps.Marker({
position: markerLatLng,
map: map
});

var info = '<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">' + data['名称'] + '</div>';
infoWindow[i] = new google.maps.InfoWindow({
content: info
});

markerEvent(i);
}

function setData(markerData){
var sidebar_html = "";
for (var i = 0; i < markerData.length; i++) {
var latitude = markerData[i]['緯度'];
if (!latitude) { continue; }
addMarker(i, markerData[i]);
var name = markerData[i]['名称'];

sidebar_html += <b>${i + 1}</b> <a href="javascript:openWindow(${i})">${name}<\/a><br />;
}

document.getElementById("sidebar").innerHTML = <a target="_blank" href="https://docs.google.com/spreadsheets/d/$1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQ/edit?usp=sharing">元データ(Google スプレッドシート)</a><br /><a target="_blank" href="https://github.com/champierre/sheet2gmap">ソースコード(GitHub)</a><br /><br /> + sidebar_html;
}

function markerEvent(i) {
marker[i].addListener('click', function() {
openWindow(i);
});
}

function openWindow(i) {
if(windowOpened){
windowOpened.close();
}
infoWindow[i].open(map, marker[i]);
windowOpened = infoWindow[i];
}

試したこと

スプリットシートの指定の仕方を
1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQにしたり、
{1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQ}にしたり、
$1XGUPUQZqc8fWlGeBGD-_XMQ0f1B8R97f7eQmGJIZ8IQにしたり
してみましたが、どれも変化しませんでした。。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る