顧客訪問リストを地図にピン表示する

フォローする

Index

概要

アプリのレコード一覧表示時に、顧客の住所をもとに地図上にピンを表示します。 ※ 詳細画面での地図表示も行います。
サンプルでは、Google Map APIを使用しています。 ご利用方法によってはGoogle Maps APIの有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。

完成形

事前準備

サンプルプログラム

ご注意事項
  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません

プログラム

  • エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します(ファイル名は任意)
  • 準備したアプリの設定画面で、保存したファイルを読み込みます
  • アプリの設定を完了します。

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード追加画面の保存実行前イベント
  3. レコード編集画面の保存実行前イベント
  4. レコード一覧の「保存ボタン」クリック時イベント
  5. レコード詳細画面が表示された時のイベント
  6. レコード一覧の表示後イベント
  7. レコード一覧画面のインライン編集開始時イベント
  8. スペースフィールドの要素を取得する
  9. レコード一覧のメニューの下側の空白部分の要素を取得する
  10. アプリのIDを取得する
  11. レコードIDを取得する
  12. REST APIリクエストを送信する

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
kamewo

マーカーにレコードNoではなく、会社名を表示したい場合は、どうすればよいでしょうか?

Avatar
Eriko

上記質問と同じ内容ですが、

会社名を表示する場合はどのようにすればよいでしょうか?

Avatar
cybozu Development team

kamewo様 Eriko様

お世話になっております。遅くなって申し訳ありません。

マーカーに会社名を表示する件ですが、156行目の変数'marker'の'title'を任意のフィールドの値に変更するように書き換えれば実現できると考えます。

またご不明な点がありましたらお気軽におたずねください。

 

Avatar
Eriko

cybozu Development team 様

いつも大変お世話になります。

当方初心者のため、大変お手数ではありますが会社名表示に変更する

サンプルコードを頂くことは可能でしょうか?

ご迷惑をおかけしますが、よろしくお願いいたします。

Avatar
cybozu Development team

Eriko様

先の投稿に誤りがありました。申し訳ありません。

156行めの訂正のみですと、詳細画面の地図のマウスオンの動作しか変わりません。

一覧のマーカーの表示を変えるには、

1. アプリの設定で会社名のフィールドコードを任意のものに設定
2. 167行目の宣言に追加
3. 174行目の配列の格納処理に追加
例)
company.push(rec[i]['<フィールドコード>'].value); // 会社名
- 237行目のrecNoを書き換え
 
の手順で可能なはずです。
ぜひお試し下さい。
Avatar
Eriko

cybozu Development team 様

いつも大変お世話になっております。

ご提示いただきました方法で試したところ、無事会社名を表示することができました!

お手数おかけしました、本当にありがとうございました。

 

重ねて質問してしまい恐縮なのですが、レコードを100件以上(すべて)表示することは可能でしょうか?

 

よろしくお願いいたします。

Avatar
cybozu Development team

Eriko様

レコードを100件以上表示することは可能といえば可能ですが、それなりに改修が必要になります。

考えられる流れとしては次の通りです。

1. 現在eventオブジェクトのrecordsプロパティの配列で取得している値を、REST APIのレコードの一括取得で500件までの上限で取得

2. こちらのTipsを参考に「さらに表示」を使って表示

よろしくお願いいたします。

ログインしてコメントを残してください。
Powered by Zendesk