How can I update markers, retrieved from firestore, on my map without reloading the page?

Question

I am retrieving markers stored in my firestore collection and want to see the changes occur in real-time without having to reload the page to see my changes.
My original method involved using get() from which I need to reload in order to see my changes

 db.collection('Limuru').get().then((snapshot) => {

            snapshot.forEach(function(child){
                   addMarker();
                    })
                  });

I then used OnSnapshot() instead of get() .

db.collection('Limuru').onSnapshot(function(snapshot) {

snapshot.forEach(function(child){ 
addMarker();
})

});

The data was changing in real-time, however the behaviour was strange as every time there was a change, more markers were added and not being replaced.
How can I restructure my code to make this work the way I want it to? Should I use AJAX or change my logic for the OnSnapshot Method?
Full code below:

<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>

<link rel="stylesheet" type="text/css" href="map.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="navbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>




<nav class="navbar navbar-dark bg-primary fixed-top" role="navigation">
        <a class="navbar-brand" href="#">Radio Africa</a>


        <a class="navbar-brand" id="loggedin"></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                        <a class="nav-link" href="./admin-map.php">Maps <span class="sr-only">(current)</span></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="">Error reports </a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Locations
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="./stations.php">Nairobi</a>
                            <a class="dropdown-item" href="./limuru.php">Limuru</a>
                            <a class="dropdown-item" href="./machakos.php">Machakos</a>

                        </div>
                    </li>


        </div>
      </nav>

  <div id="map"></div>

<!------ Include the above in your HEAD tag ---------->
<script>

   firebase.initializeApp({
     apiKey: "xxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxx",

    projectId: "xxxxxxxxxxxxxx",

   });

   const db = firebase.firestore();
   db.settings({timestampsInSnapshots: true});




    var map;
    var marker;
    var infowindow;
    var green_icon =  'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ;
    var red_icon =  'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ;

    var isBouncing;


    function initMap() {

        var options = {
            zoom: 9,
            center:  {lat: -1.2921, lng: 36.8219}
        };

        var map = new google.maps.Map(document.getElementById('map'),options);

        var oms = new OverlappingMarkerSpiderfier(map, {
            markersWontMove: true,
            markersWontHide: true,
            basicFormatEvents: true,
            keepSpiderfied: true,
            circleFootSeparation : 50,


            });



        function addMarker(coords, content, animation){

            var marker = new google.maps.Marker({
                position:  coords,

                map: map,
                icon: icon = {
                    url : isBouncing ? red_icon : green_icon,
                    scaledSize: new google.maps.Size(40, 40), // scaled size
                    // origin: new google.maps.Point(0,0), // origin
                    // anchor: new google.maps.Point(0, 0) // anchor
                },
                // IF THERE'S AN ERROR, BOUNCE IT
                animation: animation
            });

            var infoWindow = new google.maps.InfoWindow({
                content: content

            });




            marker.addListener('spider_click', function() {
                map.panTo(this.getPosition());
                infoWindow.open(map,marker);
            });
            oms.addMarker(marker); 
        }




        db.collection('Limuru').onSnapshot(function(snapshot) {

            snapshot.forEach(function(child){
                var name_loc = child.id;
                var loc = child.data().marker;
                var forward = child.data().ForwardPower;
                var reflected = child.data().ReflectedPower;

                var ups = child.data().UPSError;
                var upsDesc = child.data().UPSDesc;
                var trans = child.data().TransmitterError;
                var transDesc = child.data().TransDesc;
                 var kplc = child.data().KPLC;
                var kplcDesc = child.data().KPLCDesc;
                var sat = child.data().SatelliteReceiver;
                var satDesc = child.data().SatDesc;


                       if(ups === true && trans ===true && sat ===true && kplc ===true){
                        isBouncing = true;
                    addMarker(
                        {lat: loc.latitude, lng: loc.longitude },
                        '' +
                        '<div id="iw-container">' +
                        `<div class="iw-title"> ${name_loc}</div>` +
                        '<div class="iw-content">' +
                        "<br/>"
                        +  `<p> UPSError: ${upsDesc} </p>`
                        +  `<p> SatelliteReceiver: ${satDesc} </p>` 
                        +  `<p> KPLC: ${kplcDesc} </p>`
                         +  `<p> TransmitterError: ${transDesc} </p>`

                        +  '</div>' +
                        '<div class="iw-bottom-gradient"></div>' +
                        '</div>'


                        ,google.maps.Animation.BOUNCE
                    );
                }
})
)}
}

<script async defer
        src="https://maps.googleapis.com/maps/api/js?language=en&key=xxxxxxxxxxxxx&callback=initMap">
</script>

Answer 1

If I understand correctly your question, this is because each time the listener is triggered you receive ALL the docs in the Limuru collection.

You basically have two options:

Option 1: Re-initialize your list of markers

Ie removing all of them and re-creating them

Option 2: Listen to actual changes

As explained in the doc , you can detect "the actual changes to query results between query snapshots".

For example, you could only handle the additions, as follows:

db.collection('Limuru').onSnapshot((querySnapshot) => {
    querySnapshot.docChanges().forEach((change) => {
        if (change.type === "added") {
            addMarker();
        }
        if (change.type === "removed") {
            //Remove marker
            //https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/marker-remove
            //https://developers.google.com/maps/documentation/javascript/markers#remove
        }
        //.....

    });
    //....
  });