FireStoreでデータの更新を監視する関数メモ

はじめに

FireStoreとbingMapsを使って地図上をクリックするたびにpinとInfoboxが立つものを作ったのでそのメモです。
FireStore内のデータに変化が有るたびにピンを立て直しているので更新ボタンを押さずに反映させることが出来ます。
公式ドキュメントを見ても使いこなせず、試行錯誤の末このようなコードになりました。

クリックした位置の緯度経度を取得しピンとInfoboxを立てる

 function GetLocation(e) {
            if (e.targetType == "map") {

                newLat = e.location.latitude;
                newLon = e.location.longitude;

                //取得した緯度と経度にピンをたてる
                let color = '#ff3e6d';
                map.pin(newLat, newLon, color);

                let title = '';
                let text = $("#text").val();
                let address = $('#wltadd').val();
                let descript = '<div style="width:100px;color:#violet;">' + text + '</div>';

                actions =
                    [
                        //1.Infobox内のaction定義
                        {
                            //省略
                    ];
                // Infoboxを作る関数
                map.onInfobox(newLat, newLon, title, descript, actions);
         
            }
        }

FireStoreにデータをセット

上記の関数の最後に挿入します。

db.collection("pins").doc().set({
                    username: uid,
                    date: times(),
                    getLat: newLat,
                    getLon: newLon,
                    message: text,
                    walletInfo: address
                });

新しく追加されたデータがないか監視する関数

ここでは位置情報を取得する関数内に"pins"というコレクションの情報を監視し、新しく追加されたデータがあったら更新できるようになっています。その後、map上に"rightclick"にてGetLocation()が発火するように書いてみました。

匿名ログインを使っているためusernameごとにpinの色を変えています。
そのため自分以外の人が立てたpinは自分のpinと異なる色になります。

        //位置情報の取得に成功した時の処理
        function mapsInit(position) {
            //lat=緯度、lon=経度 を取得
            let lat = position.coords.latitude;
            let lon = position.coords.longitude;
            map = new Bmap("#myMap");
            map.startMap(lat, lon, "load", 18);

　　　　　　  ////pinsをSnapshotで監視。新しく追加されたdataがあったら更新する。
            db.collection("pins").onSnapshot(function (querySnapshot) {
                querySnapshot.forEach(function (doc) {
                    map.pin(doc.data()['getLat'], doc.data()['getLon'], "#12d3cf");
                    //infoboxに入っているusername
                    let infoUser = doc.data()['username'];
                    
                    //現在ログイン中のusername
                    let loginUser = firebase.auth().currentUser.uid;
                    actions =
                        [
                            //省略
                        ];

                    //自分以外の人にはothersの旗を作る
                    if (infoUser !== loginUser) {
                        map.onInfobox(doc.data()['getLat'], doc.data()['getLon'], 'others/' + doc.data()['date'], doc.data()['message'], actions);
                        console.log('yes');
                    }
                });
            });

            map.onMap('rightclick', GetLocation);

        };

#最後に
エラー関数などは省略してあります。またJavascriptを勉強し始めて1ヶ月ほどで作った初心者の備忘録につき、書き方がおかしいところもあると思いますがご容赦下さい。（アドバイス等ありましたらお願いします。）