When the dragend event is triggered, the Getaddress function will be called in the following code:
Getaddress(LastLat, LastLng , marker,source){
this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+LastLat+ ','+LastLng )
.map(res => res.json())
.subscribe(data => {
console.log(this.data); //json output
this.data = data.results[0].formatted_address;
console.log(this.data); //Right address
this.Origin=" ";
this.Origin=this.data;
}
});
In the HTML:
<ion-item> <ion-label >Origin</ion-label> <ion-input type="text" value={{Origin}}></ion-input> </ion-item>
When the marker's dragend event occurs, the correct address will be displayed in the console log. However, the input item only displays the initial location of the marker. Clicking on the input item will then update it to the new address or location indicated by the marker. Changing the input item to a label did not solve this issue.
Update 1 dragend event :
lastLatLng(marker,source){
google.maps.event.addListener(marker, 'dragend', () =>{
this.LastLat= marker.position.lat();
this.LastLng= marker.position.lng();
this.Getaddress(this.LastLat,this.LastLng, marker,source);
});
}