I'm currently working on integrating Google Maps and Firebase database. My goal is to save my location in the Firebase database and transfer data using @Output and eventEmitter. However, I am facing an issue where pickedLocation has a value but this.locationPick does not get assigned a value. Can anyone assist me with this problem?
@Component({
selector: 'app-location-picker',
templateUrl: './location-picker.component.html',
styleUrls: ['./location-picker.component.scss'],
})
export class LocationPickerComponent implements OnInit {
@Output() public locationPick = new EventEmitter<PlaceLocation>();
isLoading = false;
selectedLocationImage: string;
place: Place[];
constructor(private modalCtrl: ModalController, private http: HttpClient) { }
ngOnInit() {}
onPickLocation() {
this.modalCtrl.create({component: MapModalComponent}).then(modalEl => {
modalEl.onDidDismiss().then(modalData => {
if (!modalData.data) {
return;
}
const pickedLocation: PlaceLocation = {
lat: modalData.data.lat,
lng: modalData.data.lng,
address: null,
staticMapImageUrl: null
};
this.isLoading = true;
this.getAddress(modalData.data.lat, modalData.data.lng)
.pipe(switchMap(address => {
pickedLocation.address = address;
return of(this.getMapImage(pickedLocation.lat, pickedLocation.lng, 14));
})).subscribe(staticMapImageUrl => {
pickedLocation.staticMapImageUrl = staticMapImageUrl;
this.selectedLocationImage = staticMapImageUrl;
this.isLoading = false;
this.locationPick.emit(pickedLocation);
console.log(pickedLocation);
});
});
modalEl.present();
});
}
private getAddress(lat: number, lng: number) {
return this.http
.get<any>(
`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${environment.googleMapsAPIKey}`
)
.pipe(
map(geoData => {
if (!geoData || !geoData.results || geoData.results.length === 0) {
return null;
}
return geoData.results[0].formatted_address;
}));
}
private getMapImage(lat: number, lng: number, zoom: number) {
return `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=${zoom}&size=500x300&maptype=roadmap
&markers=color:red%7Clabel:Place%7C${lat},${lng}
&key=${environment.googleMapsAPIKey}`;
}
}
The issue I'm facing is that while console.log(pickedLocation); outputs the expected URL, console.log(this.locationPick); displays an empty result.
EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
closed: false
hasError: false
isStopped: false
observers: [Subscriber]
thrownError: null
__isAsync: false
_isScalar: false
__proto__: Subject