@mrg250 wrote:
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 aswellthe 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?
Posts: 2
Participants: 1
