kintone上で地図を表示するカスタマイズをCustomineで
kintoneに地図を表示するカスタマイズ。カスタマイズ的には難しかくないけど、Customine使うと簡単に実装できます。
住所を入力すると地図が自動でレコード内に表示される。公開されているjavascriptで試したことはあるけど、もっと簡単に出来そうだったのでチャレンジしてみたした。
Google Maps API利用準備
地図と言えばGoogle Maps が最初に頭に浮かんできましたが、住所を調べてリンクをコピーするとか地図を埋め込むのではない。kintoneレコードに住所入力→地図が自動表示ってのがやりたいけど、そういうことをする為には、Google Maps APIっての必要となる。
Google Maps APIを利用するために、APIキー取得方法は・・・ググったほうが早いと思います 笑
kinbozuが参考にしたページ⇒Google Maps API を使ってみた(Qiita)
有料サービスですが、毎月200ドル分は無料で使用することが可能です。通常の利用であれば超えることはないそうですが、無料分を超過した場合については、超えた分利用料金を支払う必要がある・・・当然ですよね
APIの注意点
今回、kintoneのスペースフィールド内に入力した住所の地図を自動で表示したい。
色々な記事を読んでみると「Maps JavaScriot API」を有効化すれば良い書かれている記事が多かったんですが、それだけでは地図は表示されませんでした。Maps JavaScript APIに加えてGeocoding APIも有効化する必要があるみたいです。理由は分かりませんし、間違っている可能性も大です。指摘いただければ修正します!!
まぁ、この2つを有効化することでキンボウズは無事地図を表示することが出来ましたので、ここまで出来ればあとは簡単!!
gusuku Customine設定
APIキーが取得できれば、gusuku Customineの設定へ
参考記事はこちらから→郵便番号をもとに地図を表示するkintoneカスタマイズ
全角から半角へ変更するkintoneカスタマイズ
半角でないと機能しないので、間違って全角で入力しても半角に変換してくれるという優しいアクション!!
![gusuku全角半角](https://kinbozu.com/wp-content/uploads/2019/04/map-auto01-1024x246.png)
kintoneに入力した郵便番号から住所を検索する
郵便番号フィールドに情報を入力すると
- 都道府県フィールド→都道府県
- 住所(1)→市区町村
- 住所(2)→市区町村以下の住所
- 住所(3)→番地は手動入力
- 住所(4)→建物名は手動入力
が自動で入力されるようになります。ただ、地図を表示するには住所情報を1つのフィールドにまとめておく必要があります。
なので、都道府県以下の住所情報を全て住所(1)に入力されるように設定しておきます。
![gusuku郵便番号](https://kinbozu.com/wp-content/uploads/2019/04/map-auto2-1024x245.png)
都道府県や行政区情報を集計に利用したい
住所を1つのフィールドにまとめることで、
- 都道府県別の集計
- 行政区や市区町村ごとの集計
がカウントできない可能性が出てきます。
そこで、アクションを追加し、以下の画像の様に住所を1つまとめしないアクションを追加しておきます。地図に利用する住所フィールドと、カウントさせる都道府県や市区町村・行政区フィールドを作成しておく。
郵便番号を入力すると、どちらにも自動で情報が入るので便利じゃないかな?
![](https://kinbozu.com/wp-content/uploads/2019/04/map-auto3-1024x246.png)
地図をスペースに表示する
gusuku Customine で可能な地図アクションは平成31年4月時点で3つのアクションが存在しました。
- 地図をスペースに表示する
- 地図をメニュー位置に表示する
- 地図にマーカーを追加する
今回は、地図をスペースに表示するを試してみました。
スペースフィールドを配置し(フィールド名はMapにしました)
![gusuku地図](https://kinbozu.com/wp-content/uploads/2019/04/map-auto41-1024x228.png)
京都市市役所の住所を入力すると・・・地図ドーン!!
![gusukuで地図表示](https://kinbozu.com/wp-content/uploads/2019/04/map-auto6.png)
Customineでkintone地図表示 まとめ
APIキー取得の方がgusuku Customineの設定よりも遥かに大変でした。
1か月200ドルまで無料ということで、まぁ仕事で利用するわけではないので超えることはないでしょうが、仕事で利用しても、業種によっては200ドル超えることはあまりないんじゃないでしょうかね。
ただ、gusuku customineの設定をしっかりしておかないと、必要がない時に地図を表示させる無駄が発生してしまうと結構リクエスト数増えてしまうんじゃないかんと素人的に思っています。
cybozu debeloper networkでも住所から地図を表示するに書かれている内容も昔試してみましたが、住所から地図を検索する手間が省けるって便利ですよね。
地図を一覧でも表示させることが出来るみたいなので、デイサービスの本日利用者一覧地図を表示させればルートを決めるのが視覚的に楽になると思います。
結局当日利用キャンセルが出たあと、利用している人の一覧地図をだすことで送りの便のルートを効率的に組める気がする・・・
![](https://kinbozu.co.jp/media/wp-content/uploads/sites/5/2020/02/kintone-mapff-300x169.png)