やってみたこと
kintoneアプリに緯度と経度を入力してレコードを保存すると、GoogleMapsAPIを呼び出して、「住所」フィールドに取得した住所をセットするアプリを作ってみました。
準備１：kintoneアプリの作成
まずはkintoneアプリを作成しましょう。
| フィールドの種類 | フィールド名 | フィールドコード |
|---|---|---|
| 数値 | 緯度 | 緯度 |
| 数値 | 経度 | 経度 |
| 文字列（1行） | 住所 | 住所 |
準備２：APIキーの取得
Google Maps Platformに記載の手順で、GoogleMapsのAPIキーを取得しましょう。
３つのポイントがありますので、ご注意ください。
- Maps JavaScript APIだけでなく、Geocoding APIも有効にする必要がある。
- アプリケーションの制限を「HTTPリファラー（ウェブサイト）」に設定して、APIキーを盗用されないようにする。
- Google Cloud Platform Consoleの設定にはタイムラグがある。設定が反映されないと思ったら１時間ほど待つと良い。
プログラム
- 5行目の「APIキー」の部分は、準備２で取得したAPIキーに書き換えてください。
- 24行目でPromiseを使用しているのは、eventをreturnしてレコードを更新するためです。
- 31行目で「results[0]」を使用しているのは、Geocoder.geocode()は複数の結果を一致度が高い順に返すという仕様のためです。
JavaScript
(function () {
"use strict";
// API キー
var api_key = "APIキー";
// ヘッダに要素を追加
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=" + api_key;
head.appendChild(script);
// レコード追加・編集画面の保存実行前イベント
kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function (event) {
// 緯度・経度の指定
var request = {
"location": {
"lat": parseFloat(event.record.緯度.value),
"lng": parseFloat(event.record.経度.value)
}
};
return new Promise(function (resolve, reject) {
// リバースジオコーディングの実行
var geocoder = new google.maps.Geocoder();
geocoder.geocode(request, function (results, status) {
if (status === "OK") {
if (results[0]) {
// 住所を取得できた
event.record.住所.value = results[0].formatted_address;
} else {
// 住所を取得できなかった
event.error = "住所を取得できませんでした。";
};
} else {
// エラーが発生した
event.error = "エラーが発生しました。：" + status;
};
resolve(event);
});
});
});
})();
動作確認
緯度と経度を入力してから「保存」ボタンを押すと・・・
住所を取得し、レコードが保存されます。
