概要
アプリのレコード詳細表示時に、住所をもとに地図上にピンを表示します。
サンプルでは、Google Maps PlatformのMaps JavaScript APIを使用しています。 ご利用方法によっては有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。
完成形
事前準備
- kintone アプリ（kintone アプリストア にある「顧客リスト」を使います）
アプリに以下のフィールドを追加してください。
フィールドの種類 フィールド名 フィールドコード スペース ー Map - エディター
- Maps JavaScript APIキー
こちらのページに従って取得してください。
サンプルプログラム
プログラム
12行目のYour Google API keyの部分を取得したMaps JavaScript APIキーに書き換えてください。
- エディターにサンプルプログラムをコピーし、ファイル名を”sample.js” 、文字コードを「UTF-8」にして保存します（ファイル名は任意）
- 準備したアプリの設定画面で、保存したファイルを読み込みます
- アプリの設定を完了し、レコード一覧を表示します
使用したAPI
このTipsは、2022年10月版で確認したものになります。
はまった点をコメントしておきます。
・フォームの編集で「スペース」要素を「Map」というIDで登録する必要がある
・フォームの編集で住所を「Address」というIDで登録する必要がある
・Mapの親要素のサイズ指定が必要。
・div要素のサイズ指定も必要。
※サイズ指定に関しては「顧客訪問リストを地図にピン表示する」のソースが参考になります。
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です。見逃していました。
失礼しました。
村松 達之助さま
解決済みのご連絡ありがとうございました。今後ともよろしくお願いいたします。
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
よろしくお願い致します。
cybozu Development team 様
ご回答ありがとうございます。
モバイル版の書き方を確認させて頂きます。不明点があれば、今後はJavaScript developer向けフォーラムに投稿させて頂きます。
お世話になります。
同フォーム内に２か所、地図を表示したいのですが可能でしょうか。
それぞれ違う住所になります。
２つコードファイルを置いてもエラーになってしまいます。
Satoshi Oda 様
お世話になっております。cybozu developer network運営チームです。
必要なフィールドを追加し、サンプルコードを書き換えていただくことで可能です。
追加するフィールド：
・住所を入力するフィールド（別住所とのことなので、入力フィールドを追加）
・地図を表示するためのスペースフィールド
コードの修正ポイント：
・レコードに入力した住所の取得と地図の表示を行っている「setLocation_address」を２回呼び出す
・setLocation_addressに以下についての引数を設定し、２回それぞれの呼び出し時に必要な値を渡すようにする
・住所フィールドのフィールドコード
・住所表示用スペースフィールドの要素ID
・住所表示用に生成する div 要素の id 名
なお、こちらは記事に対するフィードバック欄です。
カスタマイズの詳しいやり方についてのご質問は、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
kintoneアプリとgoogle mapの連携について教えてください。
過去スレ：Google Map APIを利用している記事についての注意事項 (2018/07/09)でも語られていますが、Google の api_key が導入されて以降、地図に関するサンプルソースがうまく動作しない様でした。
※現在も、サンプルソースでうまく動くよ！という方がいらっしゃいましたら、お報せください...。
症状は、
1.顧客訪問リストを地図にピン表示する のサンプルの場合
スペース(Map)に、google map が展開されない
2.住所から地図を表示する のサンプルの場合
スペース(Map)に 、緯度経度0. 0. の地域と思われるgoogle map が表示される
あらかじめ緯度経度情報が格納されている場合、該当のエリアが表示される
という物です。
いくつか、原因箇所と思しき箇所(※後述)を想定して、確認をしましたが、結論として、住所をもとに、緯度経度情報を取得する箇所で、処理がうまくいっていないのではないかと想定されます。
Google Map の geocode api の仕様が変わったのかと思い調べてみたのですが、上手く解決方法を見つける事が出来ませんでした。
もし、kintone で Google Mapを利用する方法をご存知の方がいらっしゃいましたら、サンプルソースをどのように修正すればよいか、お教え頂けないでしょうか。
※確認した事
・api_key は有効化しているか？ → google cloud platform のダッシュボードでapi_keyがコールされている事を確認済み
また、Google map の提供するチュートリアルで、api_keyを含むgoogle map のコールを実施して動作確認済み(参考ページ)
・スペースのMapと、.js上のフィールドコードが違う → 2.の緯度経度が入っていれば、Mapは表示される為、フィールドコード自体はマッチしている
・2.の実施時、レコードの編集モードで、住所フィールドがロックされたままになる。また、レコードの保存時、緯度経度情報が削除される
・alertコマンドで変数の格納状態をステップ実行したところ、緯度経度の座標変換系の工程がスキップされる
以上、ご助力頂ければと思います...。
Daisuke Mori さん、こんにちは。
私はどちらの記事のカスタマイズも、API キー対応の現在のサンプルコードでちゃんと動いています。
※試しにこの記事だけ手順通りにやり直してみましたが、変わりなく動きました。
やり取り長くなりそうですし、記事をまたがる話でもあるのでコミュニティに場所を移しませんか？
ここ（記事コメント）は記事をフォローしている限られた人しか見ていないので、
コミュニティのほうが人目に触れやすく、色々な方のフォローをもらいやすいです！
一応、現段階で思いつくこと書いておきます。
---------------------------
顧客訪問リストを地図にピン表示する について（1、2は記事が逆かと思います）
＞2.の実施時、レコードの編集モードで、住所フィールドがロックされたままになる。
一覧画面上でレコードを編集しようとしたおきに住所フィールドがロックされる（編集不可になる）ということでしたら、
正しい動きになっています。（サンプルコードの275行目、256～261行目あたり）
＞レコードの保存時、緯度経度情報が削除される
こちらも正しい動きです。（サンプルコード264～266行目、24～34行目）
＞alertコマンドで変数の格納状態をステップ実行したところ、緯度経度の座標変換系の工程がスキップされる
緯度経度情報の取得は、レコード詳細画面を表示したときに行われます。
緯度経度の取得が怪しそうであれば、レコード詳細画面を表示したときに
「setLocationDetail」関数でどんな動きをしているかを詳しく見てみてください。
具体的に言うと、
緯度経度の取得は73行目のgc.geocodeで行っていて、その結果が77行目のresults、statusに格納されます。
84行目あたりにブレークポイントを置いて、resultsとstatusの中身がどうなっているか見てみてください。
そもそもそこまで到達しないようであれば、どの分岐によって到達しないのかを追ってみてください。
（setLocationDetailは呼ばれるか？その中のどのif文で抜けてしまうのか？）
また、もしコンソールにエラーが出ているようなら内容を教えてください。
たまご さん、ご返信ありがとうございます！
コミュニティに移動致します、コミュニティフォーラムに新しいスレッドを立てました。
また、いただいたアドバイスをもとに、チェックを進めてみます。
初心者です。上記のコードをコピペし、地図を表示させることができました。
しかし、地図が正しい住所を示してくれません。
表示内容「福岡県」はあっているものの、「福岡県」以下の市町村が正しく認識されず、
住所とは違う位置にピンが表示されています。
何が原因でしょうか。
Aiko 様
お世話になっております。
動かない？そんな時はデバッグをしてみよう！入門編などの記事を参考にし、
コンソール上にエラーが表示されているかご確認いただけますでしょうか？
また、Web版の Google MAP では、表示したい住所に正しくピンが表示されますでしょうか？
本記事で使用している Google MAP API の仕様は Google MAP の挙動に依るため、
ご確認いただければと思います。
よろしくお願いいたします。
昨日は上記のコードを勘で書き換え、内容は覚えていませんが「福岡県」が表示されていました。（GoogleMapで今回の住所検索した際は、正しい住所にピンがたちます。）
本日、再度、上記のコードをコピーし、取得したAPIキーを入れ、何も書き換えず実行しました。
すると、地図が何も表示されなくなりました。今は「福岡県」を表示することさえ出来ません。
現在のエラーコードを添付いたします。
「住所から地図を表示する」のコード34行目の「住所」を「address」にも変えて、試しましたがダメでした。
以下、設定しているフィールドの種類と名前です。
フィールドの種類
フィールド名
フィールドコード
文字列 (1行)
緯度
lat
文字列 (1行)
経度
lng
スペース
ー
Map
文字列 (1行)
住所
address
文字列 (1行)
レコード番号
record
また、顧客訪問リストを地図にピン表示するにおいて、昨日はこちらも「福岡県（ピン先は間違っているものの、上記と同じ住所をさす）」が表示されていましたが、
本日、再度、コードをコピペし、実行したところ、こちらも何も表示されなくなってしまいました。
現在は空欄が表示されるのみです。こちはエラーコードはありません。
お力いただけると、大変助かります。
【追記】
こちらで紹介されている別の地図コード（https://developer.cybozu.io/hc/ja/articles/202179174）を上記の顧客訪問リストを地図にピン表示すると同時に使用すると、再び「福岡県」の地図が表示されましたが、やはり、ずれています。その際、以下の２種類のエラーコードが出ました。（フォームのフィールドコードは「レコード番号」は「record」のまま、「Geolocation API（位置情報）を使ったモバイル用のカスタマイズをしよう」で紹介されているコードは書き換えず「record_no」のままです。書き換えたらピンが「NaN」と表示されました。）
Aiko様
お世話になっております。cybozu developer network運営チームです。
返信が遅くなり申し訳ございません。
まず、1つ目の
> Uncaught TypeError: Cannot read property ' length ' of null
のエラーについてですが、サンプルコード34行目のフィールドコードを「住所」より「address」に変更したとのことでしたので、一度タイプミスなどないか確認していただけないでしょうか。
こちらのエラーについては、34行目で定義している「locationEl_address」がきちんと定義されておらず、lengthを確認しようとしても確認できないという現象なのではないかと推測いたします。
次に、【追記】の部分のエラーについてです。
> You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
こちらは、一つのコード内でGoogle MapのAPIを複数回読み込んでしまっている際に表示されるエラーなので、
Aiko様が書いているソースコードの中においてGoogle Map APIを複数回読み込んでいないか確認していただくことは可能でしょうか。
加えて、大変恐縮ではございますが、内容が複数の記事にまたがりますので、今後の質問に関してはcybozu developer コミュニティをご活用いただければ
こちらの記事をフォローしていないkintoneユーザーの目にも触れやすく、フォローももらいやすいです。
お手数をおかけいたしますがよろしくお願いいたします。
全くの初心者です。
記事の通りにやっているつもりですが、地図が一向に表示されません。
おおざっさな質問で大変申し訳ありませんが、初心者が、間違いやすいことを教えていただければ幸いです。
村上涼子 様
お世話になっております。
cybozu developer network運営チームです。
>記事の通りにやっているつもりですが、地図が一向に表示されません。
正常に動作しない場合の原因は色々あると思いますが、
エラーメッセージなどが分かれば、原因を特定しやすいので、
まずは、動かない？そんな時はデバッグをしてみよう！入門編などの記事を参考にし、
コンソール上にエラーが表示されているか、ご確認いただけますでしょうか？
お手数をおかけしますが、ご確認のほどよろしくお願いします。
cybozu developer network運営チームさま
お世話になっております。地図が表示されました。アドバイスありがとうございます。
今後ともよろしくお願いいたします。
お世話になっております。
記事の通りにコードを打ちましたが、エラーとなり地図が表示されません。
エラーは、
「Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see:」
となっております。
これは、Google APIの設定が原因か、kintoneが原因かが分かりません。
もし、kintoneが原因でしたら、エラーの詳細・解消法を教えていただきたいです。
よろしくお願いします。
NK様
お世話になっております。
cybozu developer network運営チームです。
運営チームで本日、動作確認をしたところ、本記事のサンプルコードは問題なく動作することを確認できました。
そのため、おそらくGoogle API側の設定が原因になっている可能性があります。
エラー文から推測できる原因の1つですが、選択しているAPIのご確認はお済みでしょうか。
Google Cloud の APIとサービス > 認証情報 > 設定したAPIキーを選択した画面で
「選択中の API」の欄にMaps JavaScript API と Geocoding API が両方とも表示されていますでしょうか？
このあたりをご確認してみていただけますと幸いです。よろしくお願いいたします。
cybozu developer network運営チーム様
お世話になっております。
Google API側の設定が原因の可能性あり、という事ですね。
頂いた情報を元に、設定確認を致します。
ありがとうございました。