カテゴリー内の他の記事

住所から地図を表示する

フォローする

Index

概要

アプリの住所フィールドの値に応じて、地図が表示される。 サンプルでは、Google Map APIを使用しています。 ご利用方法によってはGoogle Maps APIの有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。

完成形

事前準備

  • kintone アプリ(kintone アプリストア  にある「顧客リスト」を使います)
    • 「住所」フィールドの真下にあるスペースのサイズは、地図を表示できるように調整してください。
  • エディター

サンプルプログラム

プログラム

ご注意事項
  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません
  • エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します(ファイル名は任意)
  • 準備したアプリの設定画面で、保存したファイルを読み込みます
  • アプリの設定を完了し、レコード一覧を表示します

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード詳細画面が表示された時のイベント
  3. フィールド要素を取得する

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

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

Avatar
ばみ

はまった点をコメントしておきます。
・フォームの編集で「スペース」要素を「Map」というIDで登録する必要がある
・フォームの編集で住所を「Address」というIDで登録する必要がある
・Mapの親要素のサイズ指定が必要。
・div要素のサイズ指定も必要。
※サイズ指定に関しては「顧客訪問リストを地図にピン表示する」のソースが参考になります。

Avatar
村松 達之助

Google Maps APIのライセンスについて、不安になったので確認させてください。

 ご利用方法によってはGoogle Maps APIの有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。
というGoogleのサイトを確認しました「https://developers.google.com/maps/pricing-and-plans/#details」
上記サンプルプログラム上の、 「load('https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false')」でjsがJSがロードされてきますのでJSと考え
Google Maps JavaScript APIの場合、「1 日あたり最大 25,000 回のマップロードが無料」と考えてよいでしょうか。

Android アプリ以外の非公開用途には、プレミアム プランが必要とわかりましたので、本投稿は未承認でOKです。見逃していました。

 失礼しました。

村松 達之助により編集されました
Avatar
cybozu Development team

村松 達之助さま

解決済みのご連絡ありがとうございました。今後ともよろしくお願いいたします。

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