カテゴリー内の他の記事

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

2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所:JavaScriptプログラムの12行目

Index

概要

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

完成形

2018-07-18_16h49_46.png

事前準備

  • kintone アプリ(kintone アプリストア  にある「顧客リスト」を使います)
    アプリに以下のフィールドを追加してください。
     フィールドの種類  フィールド名  フィールドコード
    文字列 (1行) 緯度 lat
    文字列 (1行) 経度 lng
    スペース Map
  • エディター
  • Maps JavaScript APIキー
    こちらのページに従って取得してください。

サンプルプログラム

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

プログラム

12行目のYour Google API keyの部分を取得したMaps JavaScript APIキーに書き換えてください。

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

使用したAPI

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

変更履歴

  • 2018/07/18
    • Maps JavaScript APIキーを使用したコードに修正

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
大ちゃん

自己解決できました!

94行目

kintone.api('/k/v1/record', 'PUT', objParam, function(resp) {

kintone.api('/k/guest/【ゲストスペースのID】/v1/record', 'PUT', objParam, function(resp) {

に変更することで解決できました。

 

大変お騒がせいたしました。

初歩的なご質問にお付き合いいただきありがとうございました。

Avatar
cybozu Development team

大ちゃん 様

ご報告いただきありがとうございます。

REST APIのURLについては、下記のTipsもございますのでよろしければご参照ください。

kintone.apiにゲストスペースでも使える正しいパスを指定する
https://developer.cybozu.io/hc/ja/articles/202707864

 

引き続きkintoneをご活用いただけますと幸いです。

Avatar
おーさん

お世話になっております。

このサンプルプログラムをkintone上で動かそうとしたのですが、MAPも緯度も経度も空白のままになります。

住所のみいれております。

APIキーも入れてますが、サンプルのままでアップロードしました。

何か変更点ございましたら、ご教授いただければ幸いです。

今日からkintoneを扱い始めたばかりなので、仕様等がよくわかってない為だと思います。

宜しくお願いいたします。

Avatar
おーさん

自己解決いたしました。

お騒がせ致しました。

Avatar
Riorio

初めまして。お伺いしたいのですが、設定したものの

地図が出るであろう画面が枠だけ出て内側が白色になります。

原因お分かりになりますでしょうか?

Avatar
cybozu Development team

原島陵様

記事の手順通りになっているか、以下2点を今一度ご確認ください。

1. 緯度、経度、スペースフィールドを、フィールドコード含めて正しく設定しているか

2. Maps JavaScript APIキーを取得し、コードの該当部分を変更しているか

また、どのようなエラーが出ているか開発者ツールのConsole欄で確認すると、切り分けができるので、上記で解決しなかった場合はご確認ください。

参考 開発者ツールの使い方のページです。

Avatar
Riorio

お世話になります。ここに記載してある通りに設定しておりますが、うまくいきません。四角い枠だけが出てきて、各顧客ページ一個一個ではなぜかガーナ付近の地図になります。経度、緯度が算出されないのかわかりませんが、党y校の住所でもこのような状況です。何卒、よろしくお願いいたします。

Avatar
Riorio

お世話になります。お返事ありがとうございます。フィールド名も一致しており、問題はなさそうです。

Avatar
Riorio

consoleもエラーがないのですが。こちらの画面はGoogle側ですがこちらもエラーなしです。

Avatar
cybozu Development team

原島様

15:05にご提示いただいた画面上のどこかに、「Geocoding API」がないでしょうか。

ありましたら、クリックして「有効にする」をクリックください。

緯度経度が空欄になっていることから、「Geocoding API」が有効になっていないことが考えられます。

 

※「Geocoding API」が見つからない場合

Googleのコンソール https://console.cloud.google.com 内で、「APIとサービス」->「ライブラリ」->から「Geocoding API」を検索して、有効にしてください。

Avatar
Riorio

cybozu Development team 様

ありがとうございます。

出来ました!!

感謝します!!

サインインしてコメントを残してください。