1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

/*
 * 地図表示のサンプルプログラム
 * Copyright (c) 2013 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {

  'use strict';
  // APIキー
  const api_key = 'Your Google API key';

  // ヘッダに要素を追加します
  const load = (src) => {
    const head = document.getElementsByTagName('head')[0];
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    head.appendChild(script);
  };

  // Google Maps APIをロード
  const loadGMap = () => {
    // document.writeを定義
    const nativeWrite = document.write;
    document.write = (html) => {
      const m = html.match(/script.+src="([^"]+)"/);
      if (m) {
        load(m[1]);
      } else {
        nativeWrite(html);
      }
    };
    // Google MapのAPIライブラリをロード
    load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);
  };

  // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
  kintone.events.on('app.record.detail.show', (event) => {

    // 住所情報を元に、地図を「住所」フィールドの下に表示します
    const drawMap = () => {
      if (kintone.app.record.getFieldElement('住所').length === 0) {
        return;
      }
      // 「map_address」という要素が存在しないことを確認
      if (document.getElementsByName('map_address').length !== 0) {
        return;
      }

      // 地図を表示するdiv要素を作成します
      const mapAddressEl = document.createElement('div');
      mapAddressEl.setAttribute('id', 'map_address');
      mapAddressEl.setAttribute('name', 'map_address');

      // 「住所」フィールドに設置したスペースフィールドにmapAddressElで設定した要素を追加します
      const space = kintone.app.record.getSpaceElement('Map');
      space.appendChild(mapAddressEl);

      // Google Geocoderを定義します
      const gc = new google.maps.Geocoder();

      // 「住所」フィールドから値を取得します
      const rec = kintone.app.record.get();
      const addressValue = rec.record.住所.value;

      // Geocoding APIを実行します
      gc.geocode({
        address: addressValue,
        language: 'ja',
        country: 'JP'
      }, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {

          // 地図要素のサイズを指定します
          mapAddressEl.setAttribute('style', 'width: 300px; height: 250px');

          const point = results[0].geometry.location;
          const address = results[0].formatted_address;

          // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
          const opts = {
            zoom: 15,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
          };
          const map = new google.maps.Map(document.getElementById('map_address'), opts);

          // マーカーを設定します
          new google.maps.Marker({
            position: point,
            map: map,
            title: address
          });
        }
      });
    };

    // Google Mapがロードされるまで待ちます
    const waitLoaded = (_timeout, interval) => {
      setTimeout(() => {
        const timeout = _timeout - interval;
        if ((typeof google !== 'undefined')
              && (typeof google.maps !== 'undefined')
              && (typeof google.maps.version !== 'undefined')) {
          drawMap(); // 住所をもとに地図を表示
        } else if (_timeout > 0) {
          waitLoaded(timeout, interval);
        }
      }, interval);
    };

    if (document.getElementsByName('map_latlng').length === 0) {
      loadGMap();
      waitLoaded(10 * 1000, 100);
    }
  });

})();