Update GoogleMarker icon?

#1

Hello, Im making an app where there are pins placed across a map (by google).
the thing I want to achieve is, that whenever a field in my database (firebase) changed , the markers’ icon changes aswell

the current process is:

}
    
    ionViewDidLoad(){
      
    
        this.loadMap()
        this.getNewReports()
        this.deleteMark()
        
  
    
    }
  
    updateReports(){
      database().ref('reports/').on('child_changed', snap=>{
        if(!snap.exists || !this.markers){
            return
        }
        var report = snap.val()
        this.markers[report['number']+'_'+report['timestamp']]['icon'] =  'assets/imgs/pins/pin_'+report['type']+'_'+report['stage']+'.png';

      })
    }

    getNewReports(){

      var reportCount = 0;
      var that = this
      database().ref('reports/').on('child_added', (snapshot)=> {
        var report = snapshot.val()

        let lat = report['lat']
        let long = report['long']
      
        var id = report['number']+'_'+report['timestamp']
        var p = 'assets/imgs/pins/pin_'+report['type']+'_'+report['stage']+'.png';
        var icon = new google.maps.MarkerImage(p, null, null, null, new google.maps.Size(29, 38))
        var marker = new google.maps.Marker({
          id: id,
          position: {lat: +lat, lng: +long},
          icon:icon,
          map: this.map
        })
        this.markers[id] = marker
        marker.setMap(this.map)
        google.maps.event.addListener(marker, "click", function () {
          const modal = that.modalCtrl.create('MarkerInfoPage', {
            type: report['type'],
            author: report['author'],
            desc: report['desc'],
            image: report['path'],
            number: report['number'],
            time: report['timestamp'],
            isHazard: report['isHazard'],
            
          });
          modal.present();
          
          
        });

      })
    }
    

this basically creates an info page for each new marker. My goal is, whenever I change a field in my database (happens inside the modal), the icon of the marker will change as well.

for example, current icon is :

  1. pin_trash_0,
  2. pressing a button which will change a field in the database
  3. pin_trash_1

Right now, what I have, is that it’s not updating the icon rightaway (after exiting the modal), but when I enter ionViewDidLoad (which happens after I reenter the app)

How do I achieve this?

#2

Found a solution!

  updateReports(){
      database().ref('reports/').once('child_changed', snap=>{
        if(!snap.exists || !this.markers){
            return
        }
      var report = snap.val()
      var p =  'assets/imgs/pins/pin_'+report['type']+'_'+report['stage']+'.png'
      var icon = new google.maps.MarkerImage(p, null, null, null, new google.maps.Size(29, 38))
       this.markers[report['number']+'_'+report['timestamp']].setIcon(p);

      })
    }

This function invoked in ionViewWillEnter