<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>sheet2gmap</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #sidebar {
        position: absolute;
        top: 10%;
        left: 72%;
        width: 25%;
        height: 40%;
        border: 1px solid #666;
        padding: 6px;
        background-color: white;
        font-family: Meriyo UI;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <td><div id="sidebar"></div></td>
    <script src="constants.js"></script>
    <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 = [];
      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: 7,
        });

        var request = new XMLHttpRequest();
        request.open('GET', `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/sheet1?key=${API_KEY}`, 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/${SHEET_ID}/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];
      }
    </script>
  </body>
</html>