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 :
- pin_trash_0,
- pressing a button which will change a field in the database
- 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?