5 各機能の設定

5.1 アプリの更新について(共通事項)

本プラグインについて各種設定後は必ず「保存」が必要となります。

この操作を行わないと設定が保存されません。

k-map_5_1_1.png

また、「save(保存)」した設定をアプリに反映するには、設定画面上部にある「アプリを更新」操作が必要となります。

操作後、設定が反映されるまでに数秒から1分ほど時間がかかります。

k-map_5_1_2.png

5.2 行政区域コード

行政区域コードが保存されているフィールドをドロップダウンから選択します。

行政区域コードとは都道府県コード(2桁)+市区町村コード(3桁)から構成される5桁のコードを指します。

k-map_5_2.png

5.3 埋め込みタグ

地図を表示する一覧をドロップダウンより選択し、「埋め込みタグ出力」ボタンを押下することで、kintoneポータルを含む外部サイトのページに地図を埋め込むHTMLタグを出力します。

k-map_5_3_1.png

kintoneポータル表示例

k-map_5_3_2.png

5.4 地図表示(一覧画面)

5.4.1 初期表示位置

地図の初期表示位置座標を設定します。

“端末の位置情報取得を有効にする”にチェックすると、端末の現在位置座標を優先します。

新5-4-1.png

5.4.2 現在地表示

“端末の現在地表示を有効にする”にチェックすると、端末のGPS情報を基に現在地を示す青アイコンが表示されます。

k-map_5_4_5_1.png

表示例(PCビュー)

k-map_5_4_5_2.png

表示例(モバイルビュー)

k-map_5_4_5_3.png

5.4.3 表示サイズ

PCビューとモバイルビューの地図の高さを指定します。地図の幅は画面に対して100%になります。

5-4-1.png

5.4.4 拡大率

デフォルトの拡大率を設定します。

k-map_5_4_2.png

5.4.5 地図の種類

デフォルトの地図の種類を設定します。

地図の種類は「デフォルト」「航空写真」「デフォルト+航空写真」「地形」から選択します。

k-map_5_4_3_1.png
k-map_5_4_3_2.png

5-4-3-3.png

5-4-3-4.png

5-4-3-5.png

5.5 地図表示(追加/編集/詳細画面)

5.5.1 表示スペースの用意

アプリのフォームの設定画面で地図を表示したい位置にスペースフィールドを設置します。

5-5-1.png

設置したスペースフィールドの要素IDを設定します。

5-6-5-2.png

フォームを保存します。

5.5.2 表示スペースの設定

表示スペースで先ほど5.5.1で設置したスペースフィールドを選択します。

5-5-2.png

このように表示されるようになります。

image.png

5.5.3 地図表示タイミングの設定

追加/編集/詳細画面では地図の表示をボタンを押下した時だけに限定するか、画面表示をすると必ず地図が表示されるようにするか選択できます。

地図の表示には月に10000回まで無料のMaps JavaScript APIのリクエストを消費してしまうので、必ずしも地図表示が必要でない場合は、ボタン押下時のみの表示とすることをお勧めします。

image.png

ボタン押下時を選択した場合は、画面を開くと「地図を表示する」ボタンが表示されます。

image.png

ボタンを押下するとボタンは消え、地図が表示されます。

スクリーンショット 2025-06-18 191243.png

5.5.4 表示サイズ

PCでの地図のサイズを指定します。追加/編集/詳細画面では縦横両方のサイズを自由に決められます。

image.png

5.5.5 拡大率

デフォルトの拡大率を設定します。

image.png

5.5.6 地図の種類

デフォルトの地図の種類を設定します。

地図の種類は「デフォルト」「航空写真」「デフォルト+航空写真」「地形」から選択します。

image.png

5-5-6-1.png
5-5-6-2.png
5-5-6-3.png
5-5-6-4.png

5.6 検索機能

5.6.1 経路検索機能

"経路検索機能を有効にする"にチェックすると、kintoneに登録された住所情報から経路の選択・検索が行えるようになります。

image.png

地図上にあるメニューから"経路検索"が利用可能になります。

image.png

5.6.2 地点検索機能

"地点検索機能を有効にする"にチェックすると、地図上でフリーワードによる地点検索が可能になります。

image.png

地図上にあるメニューから"地点検索"が利用可能になります。

image.png

5.7 図形機能

5.7.1 基本設定

図形情報を格納するkintoneフィールドを指定することで、
ポリゴン(多角形)・ポリライン(直線)・円図形を登録することが可能になります。

image.png

5.7.1 ポリゴン設定

ポリゴン(多角形)の図形を作成した際に、面積や距離を自動計算する場合の設定を行います。
kintoneフィールドを指定の上、有効のチェックをONにすることで動作します。

image.png

5.7.1 ポリライン設定

ポリライン(直線)の図形を作成した際に、面積や距離を自動計算する場合の設定を行います。
kintoneフィールドを指定の上、有効のチェックをONにすることで動作します。

image.png

5.8 ポリゴン表示

5.8.1 ピン・ヒートマップを加える一覧

地図を表示したい一覧をドロップダウンより選択し、「ピン・ヒートマップを有効化する」にチェックをつけます。

k-map_5_5_1_1.png

「ピン・ヒートマップを有効化する」にチェックをつけ、ピン・ヒートマップの種類選択から「ヒートマップのみ」または「ピン+ヒートマップ」にチェックを入れることで、ヒートマップに設定項目が表示されます。

image.png

5.8.2 ヒートマップの濃淡を判定するフィールド

濃淡判定に使用するフィールドを設定します。

k-map_5_5_2.png

5.8.3 ヒートマップの濃淡判定条件

濃淡を判定する閾値と色を設定します。行はテーブル右横の「+」「ー」ボタンで追加・削除でき、最大10件まで設定可能です。

k-map_5_5_3_1.png

地図の右上に濃淡判定条件が表示されます。

k-map_5_5_3_2.png

5.8.4 ポリゴン・ピンの情報ウィンドウ

情報ウィンドウに表示するフィールドを設定します。

ピン・ヒートマップの種類選択で「ピンのみ」を選択している場合は「ピンの情報ウィンドウ」で情報ウィンドウに表示するフィールドを選択します。

image.png

PCビューの場合はピンをクリックしたとき、モバイルビューの場合はピンをタッチしたときに表示されます。

image.png

ピン・ヒートマップの種類選択で「ヒートマップのみ」を選択している場合は「ポリゴンの情報ウィンドウ」で情報ウィンドウに表示するフィールドを選択します。

image.png

PCビューの場合、ポリゴンにマウスオーバーしたときに表示されます。

image.png

モバイルビューの場合、ポリゴンをタッチしたときに表示されます。

IMG_6736.jpg

ピン・ヒートマップの種類選択で「ピン+ヒートマップ」を選択している場合は「ピンの情報ウィンドウ」で情報ウィンドウに表示するフィールドを選択します。

image.png

PCビューの場合、ピンの情報ウィンドウはピンをクリックしたとき、ポリゴンの情報ウィンドウはポリゴンにマウスオーバーしたときに「濃淡を判定する集計方法」で設定した集計値が表示されます。

image.png

モバイルビューの場合、ピン/ポリゴンをタッチしたときに表示されます。

IMG_6737.jpg

5.9 位置情報の個別・一括更新

対象レコードの住所情報から緯度・経度を自動で取得します。

5.9.1 「住所」「経度」「緯度」の設定

「住所」には住所情報を格納しているフィールドを設定し、「緯度」「経度」には自動で取得した値を保存するフィールドを設定します。

例)

k-map_5_6_1.png

5.9.2 位置情報更新の有効化設定

更新ボタンを有効にする画面を設定します。

  • レコード詳細画面の位置情報更新ボタンを有効にする

   詳細画面からレコード1件分の位置情報を更新します。

  • レコード一覧画面の位置情報更新ボタンを有効にする

   一覧画面で絞り込みしているレコードの位置情報を一括更新します。

k-map_5_6_2_1.png

それぞれ「有効にする」のチェックをつけると、ユーザー単位でボタンの表示権限を制御するテーブルが表示されます。なにも設定しない場合は全ユーザーにボタンが表示され、ユーザーを選択するとそのユーザーにのみボタンが表示されます。

k-map_5_6_2_2.png

5.9.3 位置情報の個別更新

各レコードの左端の水色の編集アイコンをクリックします。

k-map_5_6_3_1.png

開いた画面上部にある「位置情報更新」ボタンをクリックすると、5.6.1で設定した住所フィールドの情報をもとに緯度・経度を更新します。

k-map_5_6_3_2.png

例)「住所」に市区町村、位置情報の保存先に「緯度」「経度」を設定した場合

k-map_5_6_3_3.png
k-map_5_6_3_4.png

5.9.4 位置情報の一括更新

レコードの一覧画面を表示します。

k-map_5_6_4_1.png

画面上部にある「位置情報一括更新」ボタンをクリックすると、5.6.1で設定した住所フィールドの情報をもとに位置情報を一括更新します。

k-map_5_6_4_2.png

例)「住所」に市区町村、位置情報の保存先に「緯度」「経度」を設定した場合

k-map_5_6_4_3.png

5.9.5 位置情報の自動登録

ボタン操作ではなくレコード保存時に自動で緯度経度を更新する設定をします。

「緯度経度自動登録を有効にする」にチェックを入れます。

5-6-5.png

住所に変更があった場合に保存時に自動で緯度経度が更新されます。

5.10 行政区域コードの個別・一括更新

対象レコードの住所情報から行政区域コードを自動で取得します。

5.10.1 「住所」の設定

「住所」には住所情報を格納しているフィールドを設定します。

例)

k-map_5_7_1.png

5.10.2 行政区域コード更新の有効化設定

更新ボタンを有効化する画面を設定します。

・レコード詳細画面の行政区域コード更新ボタンを有効にする

 詳細画面からレコード1件分の行政区域コードを更新します。

・レコード一覧画面の行政区域コード更新ボタンを有効にする

 一覧画面で絞り込みしているレコードの行政区域コードを一括更新します。

k-map_5_7_2_1.png

それぞれ「有効にする」のチェックをつけると、ユーザー単位でボタンの表示権限を制御するテーブルが表示されます。なにも設定しない場合は全ユーザーにボタンが表示され、ユーザーを選択するとそのユーザーにのみボタンが表示されます。

k-map_5_7_2_2.png

5.10.3 行政区域コードの個別更新

各レコードの左端の水色の編集アイコンをクリックします。

k-map_5_7_3_1.png

画面上部にある「行政区域コード更新」ボタンをクリックすると、設定で指定した住所情報をもとに行政区域コードを更新します。

k-map_5_7_3_2.png

例)「住所」に住所フィールドを設定した場合

k-map_5_7_3_3.png

5.10.4 行政区域コードの一括更新

レコードの一覧画面を表示します。

k-map_5_7_4_1.png

画面上部にある「行政区域コード一括更新」ボタンをクリックすると、レコードに登録された住所情報をもとに行政区域コードを更新します。

k-map_5_7_4_2.png

例)「住所」に住所フィールドを設定した場合

k-map_5_7_4_3.png

5.11 ピンの表示

レコードに登録された緯度・経度からマップ上にピンを表示します。

5.11.1 ピン表示の有効化

ピン・ヒートマップタブ内にある、ピン・ヒートマップの種類選択から「ピンのみ」または「ピン+ヒートマップ」にチェックを入れることで、ピンに関する設定項目が表示されます。

image.png

5.11.2 ピン表示の表示例

<ピン表示なし設定>

k-map_5_8_2_1.png

<ピン表示あり設定>

k-map_5_8_2_2.png

レコードに登録されている緯度・経度からピンが表示されます。

ピンをクリックすることで詳細情報が表示されます。

5.11.3 レコードを表示リンク

「レコードを表示」をクリックすることで該当のレコードを別タブで開きます。

k-map_5_8_3.png

5.11.4 Googleマップを開くリンク

「Googleマップを開く」をクリックすることでピンの位置を中心としたGoogleマップを別タブで開きます。

k-map_5_8_4.png

5.12 ピンの種類判定

フィールドの条件によりピン(アイコン)の種類を変更します。

5.12.1 ピンの種類判定の有効化

ピンの表示設定の「ピンの種類判定を有効にする」にチェックを入れることで、ピンの種類条件判定を設定する項目が表示されます。

image.png

判定フィールド、判定演算子、判定値、アイコンを設定し、複数の判定条件を指定した場合は、上の行の設定が優先されます。(+ーで表示項目の増減可能)

k-map_5_9_1_2.png

5.12.2 ピン(アイコン)の表示例

k-map_5_9_2.png

5.12.3 ピン(アイコン)の種類

デフォルトのピンを含めて以下の73種類のピン(アイコン)を設定可能です。

k-map_5_9_3.png

5.13 ポリゴンの表示設定

5.13.1 枠線の色

枠線の色を設定します。
パレットから色を指定することも可能です。 例)#0000FF(青)

5.13.2 枠線の不透明度

枠線の不透明度を設定します。
0.0が透明、1.0が不透明となります。 例)0.8

5.13.3 枠線の太さ

枠線の太さを設定します(ピクセル単位) 例)3 (px)

5.13.4 塗りつぶしの色

塗りつぶしの色を設定します。
パレットから色を指定することも可能です。 例)#0000FF(青)

5.13.5 塗りつぶしの不透明度

塗りつぶしの不透明度を設定します。
0.0が透明、1.0が不透明となります。 例)0.3

5.13.4 ポリゴンの情報ウィンドウ

ポリゴンの情報ウィンドウに表示するフィールドを設定します。

image.png

設定後の表示イメージ

image.png

5.14 ポリラインの表示設定

5.14.1 線の色

線の色を設定します。
パレットから色を指定することも可能です。 例)#FF0000(赤)

5.14.2 線の不透明度

線の不透明度を設定します。
0.0が透明、1.0が不透明となります。 例)0.8

5.14.3 線の太さ

線の太さを設定します。(ピクセル単位) 例)5 (px)

5.14.4 ポリラインの情報ウィンドウ

ポリラインの情報ウィンドウに表示するフィールドを設定します。

image.png

設定後の表示イメージ

image.png

5.15 円の表示設定

5.15.1 枠線の色

枠線の色を設定します。
パレットから色を指定することも可能です。 例)#FFFF00(黄)

5.14.2 枠線の不透明度

枠線の不透明度を設定します。
0.0が透明、1.0が不透明となります。 例)0.8

5.14.3 枠線の太さ

枠線の太さを設定します(ピクセル単位) 例)3 (px)

5.15.4 塗りつぶしの色

枠線の色を設定します。
パレットから色を指定することも可能です。 例)#FFFF00(黄)

5.15.5 塗りつぶしの不透明度

枠線の不透明度を設定します。
0.0が透明、1.0が不透明となります。 例)0.3

5.15.6 円の情報ウィンドウ

円の情報ウィンドウに表示するフィールドを設定します。

image.png

設定後の表示イメージ

image.png

5.16 カスタムピンアイコン

5.16.1 カスタムピンアイコンのアップロード

独自の画像をピンアイコンとして使用できます。対応形式:PNG、JPEG、GIF(最大50KB

image.png

アップロードされたアイコンはピン表示時の設定欄にて選択できる様になります。

image.png
最終更新: