今回は「地図をメニュー位置に表示する」を利用し、レコード一覧画面で地図(Google Maps)を表示する方法をご紹介します。

レコード詳細画面で地図を表示する方法は「郵便番号をもとに地図を表示するkintoneカスタマイズ 」をご覧ください。


Customineの基本的な事柄は、こちらの「はじめてのカスタマイズをご参照ください。


今回のカスタマイズで出来ること

レコード一覧画面で、表示する地図の情報を持つレコードを取得し、地図(Google Maps)を表示します。

(応用する形で取得した複数のレコードのマーカーを地図に表示するカスタマイズについても下段でご紹介しております。)


カスタマイズの流れは以下の通りです。

  1. 表示したい地図(Google Maps)の「住所または緯度経度」を持っているレコードを1件取得する

  2. 1を利用して地図(Google Maps)を表示する


カスタマイズを実行するとレコード一覧画面では次のような表示になります。





事前準備:Googleマップ APIキーの用意

まず、Googleマップを利用するためのAPIキーを用意します。

手順や料金についてはこちら(もしくはこちら)をご確認ください。


GoogleのAPI利用については、2022年12月現在のところ1ヶ月200ドルの無料クレジットが利用できますので、その範囲内であれば無料でご利用いただけます(この価格は変更される可能性がありますので、詳しくは Google のサイトにてご確認ください)。



Customineの設定


まず「一覧画面を表示した時」に「一覧で画面に表示されているレコードを取得する」でレコードを取得します。

地図をメニュー位置に表示する」を利用する際に指定する「住所または緯度経度」で使用する情報を取得することが目的です。


次に「他のアクションの実行が完了した時」に「地図をメニュー位置に表示する」を利用し、地図(Google Maps)を表示します。

※重要なポイントを以下で解説します。

  • 「APIキー」:先述した、事前準備でGoogle のサイトより取得したAPIキーを設定してください

  • 「住所または緯度経度」:サンプルでは取得したレコードのフィールドを指定しました。「${$1[0].緯度} ${$1[0].経度}」は、アクション番号1で取得した1番目のレコードの緯度フィールドと経度フィールド、という意味になります。([0]は1番目のレコードを意味します)

なお、「地図をメニュー位置に表示する」で表示した地図に、このアクションだけで複数のマーカーを表示することはできません。(※1)

そのため表示できる1件のマーカーの情報を取得するために、「一覧で画面に表示されているレコードを取得する」で画面に表示されているレコードを全部取得し、「地図をメニュー位置に表示する」の「住所または緯度経度」で1番目のレコードのフィールド値を直接指定しています。


設定が終わりましたら、「kintoneアプリへ登録」をクリックして、kintoneで動作を確認してみて下さい。

一覧画面で地図(Google Maps)が表示されているかと思います。


(※1)複数のマーカーを表示する際は「地図にマーカーを追加する」を追加で設定してご利用ください。

一覧画面で使用すると、一覧のレコードの数だけ繰り返し実行されます。

そのためパラメーター「住所または緯度経度」にはフィールドの指定のみで設定可能です。


補足


地図をメニュー位置に表示する」の「住所または緯度経度」で取得したレコードのフィールドを指定するカスタマイズをご紹介しましたが、以下のように著名な建物や大まかな住所を直接入力することでも表示することが可能です。


  • 東京スカイツリー

  • 大阪府大阪市 など


まとめ


今回は「地図をメニュー位置に表示する」を利用し、レコード一覧画面で地図(Google Maps)を表示する方法をご紹介しました。

ぜひこのカスタマイズを参考にGoogle Mapsを有効活用してみてください!


カスタマイズについての質問や疑問があれば、Customineドキュメントサポートサイトもぜひご活用いただければと思います!