フォームブリッジで位置情報から住所を自動反映させたい

1.実現したい事
スマートホンから現場の住所や地図をFormBrigeを利用して自動登録させたい。
加えて写真を手動登録し、kintoneに反映後、Kviewerで閲覧したい。

現状はFormBrigeとkintoneにJSを登録させて検証しています。
下記の操作をする事で目的はクリアできますが、kintoneで位置情報から住所情報を取得(登録)をしないとKviwerでは住所を確認できません。
FormBrigeで住所まで所得してkintoneに登録させることは可能でしょうか?
FormBrigeのみで完結させるコードや手法があればご教示お願いいたします。

現状の操作:FormBrigeの登録時に自動で位置情報と地図のリンク情報が入力され、写真を撮影追加し登録(回答)します。
その後、kintoneで編集画面を表示させ、位置情報が入力されている事を確認し「保存ボタン」を押すと住所が自動登録されます。
その後、kviwerで、地図リンク、住所、現場写真を確認します。

2.試したコード
①FormBrigeコード
(function() {
  “use strict”;

  //DOM生成後イベント発火
  fb.events.form.mounted = [function (state) {
    //geolocation宣言
navigator.geolocation.getCurrentPosition(location);

    function location(position) {
        //緯度を取得し、フォームに記載
        state.record.location_lat.value = position.coords.latitude;
        //経度を取得し、フォームに記載
        state.record.location_long.value = position.coords.longitude;
        //URL生成
        state.record.location_link.value = “https://www.google.co.jp/maps?q=” + position.coords.latitude + “,” + position.coords.longitude;

    };
    return state;
  }];
})();

②kintoneコード
(function () {
    “use strict”;

    // API キー
    var api_key = “API キー”;

    // ヘッダに要素を追加
    var head = document.getElementsByTagName(“head”)[0];
    var script = document.createElement(“script”);
    script.type = “text/javascript”;
    script.src = “https://maps.googleapis.com/maps/api/js?key=” + api_key;
    head.appendChild(script);

    // レコード追加・編集画面の保存実行前イベント
    kintone.events.on([“app.record.edit.submit”, “app.record.create.submit”], function (event) {
        // 緯度・経度の指定
        var request = {
            “location”: {
                “lat”: parseFloat(event.record.location_lat.value),
                “lng”: parseFloat(event.record.location_long.value)
            }
        };

        return new Promise(function (resolve, reject) {
            // リバースジオコーディングの実行
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode(request, function (results, status) {
                if (status === “OK”) {
                    if (results[0]) {
                        // 住所を取得できた
                        event.record.addressOutput.value = results[0].formatted_address;
                    } else {
                        // 住所を取得できなかった
                        event.error = “住所を取得できませんでした。”;
                    };
                } else {
                    // エラーが発生した
                    event.error = “エラーが発生しました。:” + status;
                };
                resolve(event);
            });
        });
    });
})();

Goichiさん

こんにちは。

 

function location(position) で緯度・経度を取得した後に続いて

その緯度・経度をパラメータとして、リバースジオコーディングを実行したらいかがでしょうか。

koichi様

ご返答ありがとうございます。 FormBrigeのJSに追加して検証を繰り返していきます。

初心者で無知な状況ではありますが今後もよろしくお願いいたします。

お世話になります。下記コードをFormBrigeにのみ投入しましが、緯度経度情報が表示されず、反応がない状態になりました。

問題はどちらにありますでしょうか?

(function () {
    “use strict”;

    // API キー
    var api_key = " API キー";

    <script type=“text/javascript” src="https://maps.google.com/maps/api/js?sensor=false"></script>

    // レコード追加・編集画面の保存実行前イベント

    //DOM生成後イベント発火
    fb.events.form.mounted = [function (state) {
        //geolocation宣言
   navigator.geolocation.getCurrentPosition(location);
    function location(position) {
        //緯度を取得し、フォームに記載
        state.record.location_lat.value = position.coords.latitude;
        //経度を取得し、フォームに記載
        state.record.location_long.value = position.coords.longitude;
        //URL生成
        state.record.location_link.value = “https://www.google.co.jp/maps?q=” + position.coords.latitude + “,” + position.coords.longitude;

        state.record.address.value = reverseGeo(state.record.location_lat.value, state.record.location_long.value)

        function reverseGeo(lat,lng){
            var geoObj;
            geoObj = new google.maps.Geocoder()
            var latlng = new google.maps.LatLng(lat,lng)
            if (geoObj){
                geoObj.geocode({‘latLng’: latlng}, function(results,status){
                    if(status == “OK”){
                        return results[0].formatted_address)
                    } else {
                        alert(status)
                    }
                });
            };
        };
    };

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

上記1行を削除して、「https://maps.google.com/maps/api/js?sensor=false」を

FormBridgeのJavaScriptの設定にURL指定してみてください。

 

また、貼り付けていただいたコードの末尾の方の括弧が無いようです。

実際のコードにあれば(エラーが無ければ)問題ありません。

お世話になります。 ご返答ありがとうございます。

ご教示いただきました通り試してみたのですが、自動表示できませんでした。(最初に紹介させて頂いたコードですと緯度・経度、MAPリンクは自動で表示されます)

下記にコードとFBにて入力した項目を貼り付けます。私の認識は間違えていますでしょうか?

 

(function () {
    “use strict”;

    // API キー
    var api_key = “API キー”;

    // レコード追加・編集画面の保存実行前イベント

    //DOM生成後イベント発火
    fb.events.form.mounted = [function (state) {
        //geolocation宣言
   navigator.geolocation.getCurrentPosition(location);
    function location(position) {
        //緯度を取得し、フォームに記載
        state.record.location_lat.value = position.coords.latitude;
        //経度を取得し、フォームに記載
        state.record.location_long.value = position.coords.longitude;
        //URL生成
        state.record.location_link.value = “https://www.google.co.jp/maps?q=” + position.coords.latitude + “,” + position.coords.longitude;

        state.record.address.value = reverseGeo(state.record.location_lat.value, state.record.location_long.value)

        function reverseGeo(lat,lng){
            var geoObj;
            geoObj = new google.maps.Geocoder()
            var latlng = new google.maps.LatLng(lat,lng)
            if (geoObj){
                geoObj.geocode({‘latLng’: latlng}, function(results,status){
                    if(status == “OK”){
                        return results[0].formatted_address)
                    } else {
                        alert(status)
                    }
                });
            };
        };
    };

  }];
})();

FB入力画面

 

ご確認ありがとうございます。

私のエディタ(VSCode)で確認したらコードエラーが出ました。

return results[0].formatted_address)

最後の閉じ括弧は不要と思います。

koichi 様 ご返答ありがとうございます。ご指摘の通り )を外すと進展がありましたので、ご報告いたしました。ありがとうございます。

下記のように緯度経度、googleリンクは自動的に投入されましたが、画面上部にエラー表示が出る状況となりました。

googleMapsGeocodingAPI 等APIキーは発行済みです。kintoneでは保存ボタンをトリガーとして住所が登録されるのですが、FBにも同様になにかしらの登録ボタンが必要でしょうか?

FBのみで住所まで自動登録できるよう完結させたいです。どうかお願いいたします。

最初のkintoneのコードでは「api_key」の定義と、それを利用したコードがありますが

2つ前の投稿では、定義だけあり、それを利用したコードがありませんでした。

恐らくAPIキーを使用せずにgoogleMapsGeocodingAPIを実行したことがエラーメッセージの原因ではないかと思います。

googleMapsGeocodingAPI実行時のURLをご確認ください。

ご回答ありがとうございます。現在は上記のエラーが出ないようにすることはできましたが、addres欄に住所が入らない状況ですので、どこまで実行できているか、区切って検証していきます。

koichi 様 アドバイス頂きました通り、直接URLで指定するJSファイルを追加の欄にhttps://maps.googleapis.com/maps/api/js?key=APIキー を投入する事と、下記コードで実現できました。 ありがとうございました。

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        if(geocoder){
            geocoder.geocode({‘latLng’: latlng}, function(results,status){
                if(status==“OK”){
                    state.record.jyuusyo.value = results[0].formatted_address
                }else{
                    alert(status)

解決されて何よりです。

最終的なコードもありがとうございます。

きっと同じような仕組みに困った方にも有益な情報になろうと思います。

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。