概要
アプリのレコード一覧表示時に、顧客の住所をもとに地図上にピンを表示します。 ※ 詳細画面での地図表示も行います。
サンプルでは、Google Maps PlatformのMaps JavaScript APIを使用しています。 ご利用方法によっては有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。
完成形
事前準備
- kintone アプリ（kintone アプリストア にある「顧客リスト」を使います）
アプリに以下のフィールドを追加してください。
フィールドの種類 フィールド名 フィールドコード 文字列 (1行) 緯度 lat 文字列 (1行) 経度 lng スペース ー Map - エディター
- Maps JavaScript APIキー
こちらのページに従って取得してください。
サンプルプログラム
プログラム
12行目のYour Google API keyの部分を取得したMaps JavaScript APIキーに書き換えてください。
- エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します（ファイル名は任意）
- 準備したアプリの設定画面で、保存したファイルを読み込みます
- アプリの設定を完了します。
使用したAPI
- イベントハンドラーを登録する
- レコード追加画面の保存実行前イベント
- レコード編集画面の保存実行前イベント
- レコード一覧の「保存ボタン」クリック時イベント
- レコード詳細画面が表示された時のイベント
- レコード一覧の表示後イベント
- レコード一覧画面のインライン編集開始時イベント
- スペースフィールドの要素を取得する
- レコード一覧のメニューの下側の空白部分の要素を取得する
- アプリのIDを取得する
- レコードIDを取得する
- REST APIリクエストを送信する
変更履歴
- 2018/07/18
- Maps JavaScript APIキーを使用したコードに修正
マーカーにレコードNoではなく、会社名を表示したい場合は、どうすればよいでしょうか？
上記質問と同じ内容ですが、
会社名を表示する場合はどのようにすればよいでしょうか？
kamewo様 Eriko様
お世話になっております。遅くなって申し訳ありません。
マーカーに会社名を表示する件ですが、156行目の変数'marker'の'title'を任意のフィールドの値に変更するように書き換えれば実現できると考えます。
またご不明な点がありましたらお気軽におたずねください。
cybozu Development team 様
いつも大変お世話になります。
当方初心者のため、大変お手数ではありますが会社名表示に変更する
サンプルコードを頂くことは可能でしょうか？
ご迷惑をおかけしますが、よろしくお願いいたします。
Eriko様
先の投稿に誤りがありました。申し訳ありません。
156行めの訂正のみですと、詳細画面の地図のマウスオンの動作しか変わりません。
一覧のマーカーの表示を変えるには、
cybozu Development team 様
いつも大変お世話になっております。
ご提示いただきました方法で試したところ、無事会社名を表示することができました！
お手数おかけしました、本当にありがとうございました。
重ねて質問してしまい恐縮なのですが、レコードを100件以上（すべて）表示することは可能でしょうか？
よろしくお願いいたします。
Eriko様
レコードを100件以上表示することは可能といえば可能ですが、それなりに改修が必要になります。
考えられる流れとしては次の通りです。
1. 現在eventオブジェクトのrecordsプロパティの配列で取得している値を、REST APIのレコードの一括取得で500件までの上限で取得
2. こちらのTipsを参考に「さらに表示」を使って表示
よろしくお願いいたします。
かなり初心者です。
上述の通り、試したのですがうまくいきません。
もう少し具体的にご説明いただけると助かります。
ちなみに一覧表示のときのみの変更で結構です。
よろしくお願いいたします。
lifepharma 様
ご質問ありがとうございます。
うまく行かいのは100件以上表示のことでしょうか？
標準機能では最大100件しか表示できない為、100件以上を表示させるには、こちらのTipsのようにカスタマイズビューを作成する必要になります。
「③検索クエリに基づいて、次の100件の取得」でさらに100件を取得して、
取得したすべてのレコードのオブジェクト［response］を、一覧が表示されたときのイベントで呼び出される関数（本記事のサンプルコードの32行目、244行目）に渡します。
また、こちらは本記事に対するフィードバックを頂く場所でございます。
カスタマイズに関するご質問はcybozu developer コミュニティをご活用いただけると、kintone有志達から色々アドバスをもらえると思います。
ぜひご活用ください。
よろしくお願いいたします。
lifepharma 様
認識ずれてしまいまして申し訳ございません。
ポインターに表示する文字をレコード番号から会社名に変更するには、次のように変更します。
179行目：
recno.push( parseFloat(rec[i].$id.value)); ➡ recno.push(rec[i].会社名.value);
※上記は、会社名フィールドのフィールドコードを「会社名」に設定している場合です。
また、recnoという変数名は必要に応じて変更してください。
よろしくお願いいたします。
cybozu Development team 様
表示の変更ができました。
ありがとうございました。
cybozu Development team 様
いつもお世話になっております。
地図表示なのですが今までレコード数が２０００を超えてから、
急にそれ以降のページに地図表示がなされず、空欄になってしまいました。
（２０００より以前のレコードに関しては問題なく表示されます）
素人でお恥ずかしいのですが原因がわからず困惑しております。
アドバイスいただけませんでしょうか。
LTB admin様
2000件という件数で特にkintoneで制限はないため、Google側の何かの制限にかかっている可能性が考えられます。
開発者ツールのコンソール画面に何かエラーが出ていないでしょうか？
エラーの内容をスクリーンショットで提示いただくことは可能でしょうか。
開発者ツールの開き方はこちらの記事をご参照ください。 https://developer.cybozu.io/hc/ja/articles/207613916
マーカーをクリックすれば対象のレコードへジャンプする機能をつけたいのですが、
どのようにすればよろしいでしょうか。
teranaka様
お世話になっております。
こちらのコメント欄は記事に直接関係するコメントをお願いしており、
質問が記事のシナリオと異なる場合、コミュニティでの質問をお願いしております。
恐れ入りますが、以下のコミュニティで再度ご投稿いただけますでしょうか。
JavaScript developer向けフォーラム
https://developer.cybozu.io/hc/ja/community/topics/20003434
よろしくお願い申し上げます。
cybozu Development team 様
申し訳ございません。
「マーカー」ではなく、正しくは地図上に表記されている「ピン」のことなのですが、質問違いでしたでしょうか。
JavaScript developer向けフォーラムの方でも同様の質問を投稿してみます。
teranaka様
ご返信いただきありがとうございます。
記事のサンプルに書いてある物以外の部分をカスタマイズされたいとのことでしたら、
コミュニティでご質問していただいた方がよりよい答えを得られるかと思い、ご案内させていただきました。
引き続き、cybozu developer networkをよろしくお願い致します。
cybozu Development team 様
当方全くの素人です。モバイル版のサンプルコードを頂くことは可能でしょうか。
住所から地図を表示するでも同じ質問を上げさせていただきました。
利用者からモバイルでの利用要求が高く困っているところです。宜しくお願いいたします。
bigbros様
こちらにもコメントいただきありがとうございます。
先ほど返答させていただいた内容をご確認いただけばと思います。
よろしくお願い致します。
cybozu Development team 様
ご回答ありがとうございます。頂いた情報をもとに作成しみます。
今後ともよろしくお願いいたします。
顧客アプリとこのサンプルコードをそのまま使用した場合
特に問題なく動いたのですが、
自作したアプリの場合は
Google Map APIを利用するのに
Google Map APIからAPIキーを発行する必要がございますか？
kyoden 様
お世話になっております。
cybozu developer network 運営事務局です。
いただいた質問について、Googleのサイトで確認すると、
APIキーを含まないリクエストのサポートを終了し、利用できるのは、
API キーを含めて行われたリクエストのみとのことです。
(※2016年6月22日より前に作成されたアプリの場合、適用外とのことです。)
最近作られたアプリである場合、APIキーの発行は必要になるかと思われます。
詳しくは以下のページをご参照ください。
https://developers.google.com/maps/pricing-and-plans/standard-plan-2016-update
よろしくお願いいたします。
こちら「緯度・経度がない場合は、住所をもとに緯度・経度を算出」とありますが、下記３点を教えてください。
①この算出にはどのようなプログラムを使用しておりますか？
②上限などありますでしょうか？
③上限がある場合、どのような定義でカウントされますか？（アプリを開くたびに、すべてのレコード分が読み込まれてカウントされるのでしょうか。）
よろしくお願いいたします。
maro 様
お世話になっております。developer network事務局です。
① L60に記述してあるとおり、GoogleのGeocoding API を利用しております。
仕様等につきましては、こちらのサイトをご確認ください。
https://developers.google.com/maps/documentation/geocoding/intro
② 上限というのはAPIのコール数ということでしょうか。
その場合、こちらはGoogleの仕様に依存する形となりますので、Google Map APIのドキュメントをご確認いただきたく思います。
③ こちらもGoogleの仕様によりますので一概には言えませんが、一般的にAPIの呼び出し回数でカウントされることが多いです。
本サンプルでは、「レコード一覧画面を開く/更新」「レコード詳細画面を開く/更新」するたびに地図を読み込むようになっております。
よろしくお願いいたします。
お世話になります。
先日はご回答ありがとうございました。
改めてご質問させてください。
現在こちらのテンプレートを使用させていただいておいますが、
マッピングされたレコードのうち最後に更新されたものが、マッピングされておりません。
consoleで確認すると、Objectもレコード数-1となっております。
どのような原因が考えられるでしょうか。お手数おかけいたしますが、よろしくお願いいたします。
maro 様
お世話になっております。developer network事務局です。
こちらで動作確認を行いましたところ、問題なく動くことを確認いたしました。
つきましては、以下2点、ご確認いただけますでしょうか？
①マッピングされていないレコードの「経度」フィールド、「緯度」フィールドに値は入っていますでしょうか。
②「最後に更新されたもの」というのは、最後に更新したレコードのマッピングが常に表示されないということでしょうか。
ご確認よろしくお願いいたします。
お世話になります。
Maps JavaScript APIキーも取得し、無事に使っていたのですが、元々利用していたアプリがあるスペースをテンプレート化し
他社のKintoneで読み込みしたところ、動作しなくなりました。
私には原因が分からず、お手上げの状態です。
まだまだ初心者です。
どなたかご教授いただけますでしょうか？
宜しくお願い致します。
大ちゃんさま
cybozu developer networkをご利用いただき、ありがとうございます。cybozu developer network運営事務局です。
ご質問の件ですが、いくつか確認させていただけますでしょうか。
①Maps JavaScript APIキーを発行の際に、使用範囲の設定（使用するサイトのURLを指定）されていますでしょうか。
→ この場合、他社のkintone環境では同じAPIキーでは動作いたしません。他社環境用のAPIキーを取得、設定が必要になります。
②コンソールにエラーが出ているかどうかご確認いただき、エラーがあった場合にはどのようなエラーが出ているか、ご連絡いただけますでしょうか。
③他社環境へ反映した際に、変更した点があれば教えていただけますでしょうか。
お手数をおかけいたしますが、よろしくお願いいたします。
ご連絡ありがとうございます。
それぞれ回答させていただきます。
①使用範囲の設定はしておりません
②エラーは下記のように表示されます。
③内容自体はそのまま移行しました。ですが今までは通常のスペース内に作成しておりましたが、今回はゲストスペースとして作成しました。この違いは関係ありますでしょうか？
ご回答内容は以上で正しいでしょうか？
宜しくお願い致します。