Hi,
I’m using a searchbar for Geolocation inside my app, but it seems like the Autocomplete isn’t working properly.
The first city is autocompleted correctly, but if I erase all text inside the searchbar and put another city, there is no autocompletion.
Below is the part of my code if you can help me, maybe something is wrong.
For information, I’m a beginner, my developper developped my app but he is not working anymore for me.
ngOnInit() {
alert("calling two times");
this.acService = new google.maps.places.AutocompleteService();
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
if(this.edit==false){
this.getLocation();
}else{
this.lat=this.latituded;
this.lng=this.longitude;
this.address=this.add;
this.addmarker();
}
}
updateSearch() {
console.log('modal > updateSearch');
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let self = this;
let config = {
types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
input: this.autocomplete.query,
componentRestrictions: { }
}
this.acService.getPlacePredictions(config, function (predictions, status) {
console.log('modal > getPlacePredictions > status > ', status);
self.autocompleteItems = [];
if(predictions!= null){
predictions.forEach(function (prediction) {
self.autocompleteItems.push(prediction);
});
}
});
}
getLocation(){
this.loadMap();
}
choose(event,terms){
this.autocomplete.query = terms;
this.autocompleteItems = this.autocompleteItems.filter((terms) => {
return '';
})
// alert(terms);
console.log(terms);
this.address=terms
this.nextaddress=this.address;
this.locationfromsearch=true;
this.addressdiv.nativeElement.innerHTML=this.address;
if(terms.length>= 3){
this.nativeGeocoder.forwardGeocode(terms, this.forwardoptions)
.then((coordinates: NativeGeocoderForwardResult[]) => {
// alert('The coordinates are latitude=' + coordinates[0].latitude + ' and longitude=' + coordinates[0].longitude)
// alert(coordinates[0].latitude);
// alert(coordinates[0].longitude);
let myLatlng:any = {
lat:coordinates[0].latitude,
lng:coordinates[0].longitude
};
this.map.setCameraTarget(myLatlng);
this.markerlocation.setPosition(myLatlng);
this.findExactAddress(coordinates[0].latitude,coordinates[0].longitude)
}).catch((error: any) => console.log(error));
}
}
findExactAddress(lat,lng){
this.nativeGeocoder.reverseGeocode(lat,lng)
.then((result:any) => {
// window.localStorage.setItem('country',result[0].countryName);
// window.localStorage.setItem('location',result[0].locality);
// window.localStorage.setItem('city',result[0].subLocality);
// window.localStorage.setItem('latituded', result[0].target.lat);
// window.localStorage.setItem('longitude',result[0].target.lng);
// alert(JSON.stringify(result));
this.country=result[0].countryName;
this.location=result[0].locality;
this.city= result[0].subLocality;
// this.nextaddress=this.nextaddress
// this.latituded=result[0].target.lat
// this.nextaddress = this.generateAddress(result[0]);
// alert(“hello”+this.address);
// this.nextaddress=this.address;
// alert(this.nextaddress);
// this.addressdiv.nativeElement.innerHTML=this.nextaddress;
}).catch((err)=>{
console.log(JSON.stringify(err));
});
}