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文で抜けてしまうのか?)

また、もしコンソールにエラーが出ているようなら内容を教えてください。

Daisuke Mori さん

私も似たような現象(自動で緯度経度を取得できず、手動で緯度経度を入力した場合は地図が表示される)になりました。

結論から申し上げますと「API の制限」で「Maps JavaScript API」のみを選択していたからでした。
「Geocoding API」を追加することで解決しました。

ご参考になれば幸いです。