カテゴリー内の他の記事

住所から地図を表示する

フォローする

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

村松 達之助さま

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

Avatar
bigbros

cybozu Development team 様

当方全くの素人です。モバイル版のサンプルコードを頂くことは可能でしょうか。

Avatar
cybozu Development team

bigbros様

コメントいただきありがとうございます。

こちらのコメント欄では、「記事通りに設定をしたけれど動かない」などの記事に直接関係するコメントをお願いしております。
申し訳ございませんが、新たにサンプルを作成するという内容などの場合は、是非コミュニティをご活用いただければと思います。

今回のご質問が、モバイル版のサンプルコードということですが、下記の記事はご覧いただけましたでしょうか?

・Geolocation API(位置情報)を使ったモバイルアプリを作ってみよう
https://developer.cybozu.io/hc/ja/articles/202179174

モバイル版の書き方も載っておりますので、参考になると思いますので、是非ご確認ください。

今後、記事の内容ではない、サンプルややり方については、下記のコミュニティに投稿いただければと思います。

JavaScript developer向けフォーラム
https://developer.cybozu.io/hc/ja/community/topics/20003434

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

 

Avatar
bigbros

cybozu Development team 様

ご回答ありがとうございます。

モバイル版の書き方を確認させて頂きます。不明点があれば、今後はJavaScript developer向けフォーラムに投稿させて頂きます。

Avatar
Satoshi Oda

お世話になります。

同フォーム内に2か所、地図を表示したいのですが可能でしょうか。

それぞれ違う住所になります。

2つコードファイルを置いてもエラーになってしまいます。

Avatar
cybozu Development team

Satoshi Oda 様

お世話になっております。cybozu developer network運営チームです。

必要なフィールドを追加し、サンプルコードを書き換えていただくことで可能です。

追加するフィールド:
・住所を入力するフィールド(別住所とのことなので、入力フィールドを追加)
・地図を表示するためのスペースフィールド

コードの修正ポイント:
・レコードに入力した住所の取得と地図の表示を行っている「setLocation_address」を2回呼び出す
・setLocation_addressに以下についての引数を設定し、2回それぞれの呼び出し時に必要な値を渡すようにする
 ・住所フィールドのフィールドコード
 ・住所表示用スペースフィールドの要素ID
 ・住所表示用に生成する div 要素の id 名

なお、こちらは記事に対するフィードバック欄です。
カスタマイズの詳しいやり方についてのご質問は、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

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