Help us understand the problem. What is going on with this article?

【Google MAP】スプレッドシートAPI連携による日本世界遺産の表示

はじめに:やりたいこと

前提条件

  • Google Map API keyの取得

使用技術

  • JavaScript
  • Google Map API
  • Sheetson (GoogleスプレッドシートでAPIをつくる)

作成サイトイメージ

・日本の世界遺産リストを表示する
(自分が訪れたところがあるところとないところをピンで色分け)

作成サイト
1.png

Google スプレッドシートの作成

観測史上最速!GoogleスプレッドシートだけでAPIが作れる「Sheetson」をみて、Googleスプレッドシートを作成する。

①スプレッドシートを作成する
②共有する sheetson@project-id-9647564749903618942.iam.gserviceaccount.com
③URLをたたけば、アクセスできる
(例)https://api.sheetson.com/v1/sheets/シート名?spreadsheetId=スプレッドシートID

・スプレッドシートには、名称、緯度、経度、サイトURL、区分、写真パスなどの情報を保持
2.png

コード(JavaScript)

・JavaScriptでAPIを呼び出す方法

// XMLHttpRequestオブジェクトの作成
var request = new XMLHttpRequest();

// URLを開く
request.open('GET', URL, true);

// レスポンスが返ってきた時の処理を記述 
request.onload = function () {
  // レスポンスが返ってきた時の処理
}

// リクエストをURLに送信
request.send();

・全体のコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Google Maps World Heritage(Japan)</title>
    <style>
      // 省略
    </style>
  </head>
  <body>
    <div id="header">Google Maps - World Heritage(Japan) - 日本の世界遺産</div>
    <div id="target"></div>
    <td><div id="sidebar"></div></td>

    <!-- Google MAP API呼出 -->
    <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=「APIキーを設定する」&callback=initMap" async defer></script>

    <script>
      var map;
      var marker = [];
      var infoWindow = [];

      function initMap() {

        var target = document.getElementById('target');
        var centerp = {lat: 37.67229496806523, lng: 137.88838989062504};

        //マップ表示
        map = new google.maps.Map(target, {
          center: centerp,
          zoom: 5,
        });

        //APIにてデータを取得して、位置とマーカーをセットするfunctionを呼び出す
        var request = new XMLHttpRequest();
        request.open('GET', 'https://api.sheetson.com/v1/sheets/「シート名」?spreadsheetId=「スプレッドシートID」', true);
        request.responseType = 'json';

        request.onload = function () {
          var markerData = this.response;
          // console.log(markerData);
          setData(markerData);
        };

        request.send();

      }

      // 位置とマーカーをセットするfunction
      function setData(markerData){

        var sidebar_html = "";
        var icon;

        for (var i = 0; i < markerData.results.length; i++) {
          // マーカー位置セット
          var markerLatLng = new google.maps.LatLng({
            lat: Number(markerData.results[i]['lat']),
            lng: Number(markerData.results[i]['lng'])
          });
          // マーカーアイコンのセット
          if (markerData.results[i]['pic'] === 'on'){
            icon = new google.maps.MarkerImage('./icon_blue/numbericon_blue_' + [i + 1] + '.png');
          } else {
            icon = new google.maps.MarkerImage('./icon_pink/numbericon_pink_' + [i + 1] + '.png');
          }
          // マーカーのセット
          marker[i] = new google.maps.Marker({
            position: markerLatLng,          // マーカーを立てる位置を指定
            map: map,                        // マーカーを立てる地図を指定
            icon: icon                       // アイコン指定
          });
          // 吹き出しの追加
          var name = markerData.results[i]['name'];
          var url = markerData.results[i]['url'];
          var tag = markerData.results[i]['tag'];
          var img = markerData.results[i]['img'];

          if (markerData.results[i]['pic'] === 'on'){
            var setHtml = '<a href=' + url + ' target="right">' + name + '</a><br><br>' + tag + '<br><img src=' + img + ' width="200" height="150"><br>'
          } else {
            var setHtml = '<a href=' + url + ' target="right">' + name + '</a><br><br>' + tag + '<br><br>'
          }

          infoWindow[i] = new google.maps.InfoWindow({
            content: setHtml           // 吹き出しに表示する内容
          });
          // サイドバー
          sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />';
          // マーカーにクリックイベントを追加
          markerEvent(i);
        }

        // サイドバー
        document.getElementById("sidebar").innerHTML = '<日本の世界遺産List><br><br>' + sidebar_html;

      }

      var openWindow;

      // クリックイベント
      function markerEvent(i) {
        marker[i].addListener('click', function() {
          myclick(i);
        });
      }

      // 吹き出しのオープン・クローズ
      function myclick(i) {
        if(openWindow){
          openWindow.close();
        }
        infoWindow[i].open(map, marker[i]);
        openWindow = infoWindow[i];
      }

    </script>

  </body>
</html>

まとめ

  • いままでプログラム中に緯度・経度を直接コードの中に記載していたものを、DBよりもさらに手軽に、外だしすることができました。
  • 例えば、Google Apps ScriptなどでGoogleスプレッドシートを自動更新すると、APIにより取得できる情報が変わるので、静的な情報ばかりなく、いろいろな用途が考えるような気がします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away