【kintoneアプリ】Google Map APIを使ってリバースジオコーディングをしてみた！

2019.11.27

Jumpei Yamamoto

kintoneアプリ開発を行っていて、緯度・経度から住所の情報に変換したいという要望があり、Google MAP APIを使ってみたので、やり方をまとめていきたいと思います。

実装する機能の概要

今回はkintoneアプリに下記の機能をJavaScriptで実装していきます。

kintoneアプリには緯度・経度・住所が登録できるフィールドを設置する
プログラムはレコードの登録または保存時に発火する
Google MAP APIを用いて、緯度・経度から住所に変換する
住所情報を該当レコードに登録する（PUT）

リバースジオコーディングのサンプルコード

早速ですが、こちらがサンプル。

(function() {

  // Google Map API の指定
  var script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?key=******'; // API Keyを入力する
  document.body.appendChild(script);

  // レコードの登録イベントを取得する
  kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function(event) {
    var record = event.record;
    var recordNo = record.record_no.value;
    var lat = record.lat.value;
    var lng = record.lng.value;
    var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
    getAddress(updateRecord, latlng, recordNo);
  });

  // GoogleAPIを使って住所を取得する
  function getAddress(callback, latlng, recordNo){
    var geocoder = new google.maps.Geocoder;
    geocoder.geocode({'location': latlng}, function(results, status) {
      if (status === 'OK') {
        var parkAddress = "";
        var addressData = results[0].address_components;

        if(addressData[addressData.length - 2].short_name == "JP"){
          // 日本の住所取得
          for(var i=addressData.length-3; i>=0; i--){
            if(addressData[i].long_name != "Unnamed Road") parkAddress += addressData[i].long_name;
          }
        }else{
          // 海外の住所取得
          for(var i=addressData.length-3; i>=0; i--){
            if(addressData[i].long_name != "Unnamed Road" && i==0) parkAddress += addressData[i].long_name;
            else if(addressData[i].long_name != "Unnamed Road" && i!=0) parkAddress += addressData[i].long_name + ", ";
          }
        }
        // 住所のデータを返す
        callback(parkAddress, recordNo);

      } else {
        window.alert('Geocoder failed due to: ' + status);
        return;
      }
    });
  }

  // 該当レコードに住所を登録する
  function updateRecord(address, recordNo){
    appId = kintone.app.getId();
    var body = {
      "app": appId,
      "id": recordNo,
      "record": {
        "address": { "value": address }
      }
    };

    kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function(resp) {
      // 画面を更新する
      window.location.reload();
    }, function(error) {
      // error
      console.log(error);
    });
  }
})();

(function() {

// Google Map API の指定

var script = document.createElement('script');

script.src = 'https://maps.googleapis.com/maps/api/js?key=******'; // API Keyを入力する

document.body.appendChild(script);

// レコードの登録イベントを取得する

kintone.events.on(["app.record.edit.submit", "app.record.create.submit"], function(event) {

var record = event.record;

var recordNo = record.record_no.value;

var lat = record.lat.value;

var lng = record.lng.value;

var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};

getAddress(updateRecord, latlng, recordNo);

});

// GoogleAPIを使って住所を取得する

function getAddress(callback, latlng, recordNo){

var geocoder = new google.maps.Geocoder;

geocoder.geocode({'location': latlng}, function(results, status) {

if (status === 'OK') {

var parkAddress = "";

var addressData = results[0].address_components;

if(addressData[addressData.length - 2].short_name == "JP"){

// 日本の住所取得

for(var i=addressData.length-3; i>=0; i--){

if(addressData[i].long_name != "Unnamed Road") parkAddress += addressData[i].long_name;

}

}else{

// 海外の住所取得

for(var i=addressData.length-3; i>=0; i--){

if(addressData[i].long_name != "Unnamed Road" && i==0) parkAddress += addressData[i].long_name;

else if(addressData[i].long_name != "Unnamed Road" && i!=0) parkAddress += addressData[i].long_name + ", ";

}

// 住所のデータを返す

callback(parkAddress, recordNo);

} else {

window.alert('Geocoder failed due to: ' + status);

return;

}

});

}

// 該当レコードに住所を登録する

function updateRecord(address, recordNo){

appId = kintone.app.getId();

var body = {

"app": appId,

"id": recordNo,

"record": {

"address": { "value": address }

}

};

kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body, function(resp) {

// 画面を更新する

window.location.reload();

}, function(error) {

// error

console.log(error);

});

}

})();

Google MAP APIのAPI Keyを設定する

まずはGoogle MAP APIのAPI Keyを取得しましょう。こちらの手順でAPI Keyを取得できるので、下記の通り設定してください。

  // Google Map API の指定
  var script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?key=******'; // API Keyを入力する
  document.body.appendChild(script);

// Google Map API の指定

var script = document.createElement('script');

script.src = 'https://maps.googleapis.com/maps/api/js?key=******'; // API Keyを入力する

document.body.appendChild(script);

緯度・経度から住所を取得する

上記のサンプルでは、レコード保存時に緯度・経度情報を取得し、それをGoogle MAP APIに渡してあげて、住所に変換しています。

Google MAP APIを叩くと、下記のようなレスポンスが返ってきます。国名から番地までフルの住所を取得したい場合は、”formatted_addresss”を参照するのが良いでしょう。

その他レスポンスの詳細はこちらに記載されています。

{
      "address_components" : [
        {
          "long_name" : "１",
          "short_name" : "１",
          "types" : [ "sublocality_level_4", "sublocality", "political" ]
        },
        {
          "long_name" : "８",
          "short_name" : "８",
          "types" : [ "sublocality_level_3", "sublocality", "political" ]
        },
        {
          "long_name" : "２丁目",
          "short_name" : "２丁目",
          "types" : [ "sublocality_level_2", "sublocality", "political" ]
        },
        {
          "long_name" : "西新宿",
          "short_name" : "西新宿",
          "types" : [ "sublocality_level_1", "sublocality", "political" ]
        },
        {
          "long_name" : "新宿区",
          "short_name" : "新宿区",
          "types" : [ "locality", "political" ]
        },
        {
          "long_name" : "東京都",
          "short_name" : "東京都",
          "types" : [ "administrative_area_level_1", "political" ]
        },
        {
          "long_name" : "日本",
          "short_name" : "JP",
          "types" : [ "country", "political" ]
        }
      ],
      "formatted_address" : "日本, 東京都新宿区西新宿２丁目８−１",
      "geometry" : {
        "location" : {
          "lat" : 35.68918480,
          "lng" : 139.69164810
        },
        "location_type" : "APPROXIMATE",
        "viewport" : {
          "northeast" : {
            "lat" : 35.69053378029150,
            "lng" : 139.6929970802915
          },
          "southwest" : {
            "lat" : 35.68783581970850,
            "lng" : 139.6902991197085
          }
        }
      }

{

"address_components" : [

{

"long_name" : "１",

"short_name" : "１",

"types" : [ "sublocality_level_4", "sublocality", "political" ]

{

"long_name" : "８",

"short_name" : "８",

"types" : [ "sublocality_level_3", "sublocality", "political" ]

{

"long_name" : "２丁目",

"short_name" : "２丁目",

"types" : [ "sublocality_level_2", "sublocality", "political" ]

{

"long_name" : "西新宿",

"short_name" : "西新宿",

"types" : [ "sublocality_level_1", "sublocality", "political" ]

{

"long_name" : "新宿区",

"short_name" : "新宿区",

"types" : [ "locality", "political" ]

{

"long_name" : "東京都",

"short_name" : "東京都",

"types" : [ "administrative_area_level_1", "political" ]

{

"long_name" : "日本",

"short_name" : "JP",

"types" : [ "country", "political" ]

}

"formatted_address" : "日本, 東京都新宿区西新宿２丁目８−１",

"geometry" : {

"location" : {

"lat" : 35.68918480,

"lng" : 139.69164810

"location_type" : "APPROXIMATE",

"viewport" : {

"northeast" : {

"lat" : 35.69053378029150,

"lng" : 139.6929970802915

"southwest" : {

"lat" : 35.68783581970850,

"lng" : 139.6902991197085

}

住所が取得できたら、あとはレコードに登録するだけです。ただし、住所を取得しているのは非同期処理になるので、サンプルではcallbackを用いて該当レコードにPUTしています。

Google Map APIを使う場合の注意点

Google Map APIは非常に便利で使いやすいのですが、唯一の弱点は利用回数に制限があることです。それも、1日に2,500回までなので、多くのデータの取扱いがある場合は割とすぐに制限を超えてしまうでしょう。

その場合に便利なのが、Yahoo APIです。こちらは利用制限が50,000回/日になるので、既にある緯度・経度データを一気に処理したい場合は、こちらを使うのが良いです。

Yahoo APIを用いたリバースジオコーディングについては、次回執筆します！

無料相談はこちら