Hi All,
I am writing an itinerary app to add the points search by google places API. I can get the list of places successfully and list out in console. But the data will be shown on the screen after 5 seconds or more.
Any hints to have the data shown right after the list retrieved from google?
The html code
<ion-content padding>
<ion-item>
<ion-input placeholder="{{ 'itinerary-search.name' | translate }}" [(ngModel)]="googleName" id="name"></ion-input>
<ion-button slot="end" (click)="textSearch()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-item>
<ion-card *ngFor="let placesServiceResult of placesServiceResults">
<ion-item>
<ion-label class="ion-text-wrap">{{ placesServiceResult.name }}</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">{{ placesServiceResult.formatted_address }}</ion-label>
</ion-item>
<ion-item>
<ion-button slot="start">
<ion-icon slot="icon-only" name="map"></ion-icon>
</ion-button>
<ion-button slot="end">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-item>
</ion-card>
<ion-fab horizontal="end" (click)="scrollToTop()">
<ion-fab-button size="small"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
</ion-fab>
<div #map id="map" style="display: none;"></div>
</ion-content>
After input a name and click the search button, the card will be shown after 5 seconds or more
The textSearch function
async textSearch() {
console.log('ItinerarySearchPage textSearch');
const queryRequest = {
query: this.googleName
};
this.placesServiceResults = [];
this.placesServiceQuery = new google.maps.places.PlacesService(this.googleMap);
await this.placesServiceQuery.textSearch(queryRequest, async (queryResults, queryStatus) => {
console.log('ItinerarySearchPage textSearch queryStatus=', queryStatus);
console.log('ItinerarySearchPage textSearch queryResults=', queryResults);
if (queryStatus === google.maps.places.PlacesServiceStatus.OK) {
await queryResults.forEach(element => {
const placeResult: PlaceResult = {
formatted_address: null,
geometry_location_lat: null,
geometry_location_lng: null,
icon: null,
name: null,
place_id: null
};
const formattedAddress = element.formatted_address;
const geometryLocationLat = element.geometry.location.lat();
const geometryLocationLng = element.geometry.location.lng();
const icon = element.icon;
const name = element.name;
const placeId = element.place_id;
placeResult.formatted_address = formattedAddress;
placeResult.geometry_location_lat = geometryLocationLat;
placeResult.geometry_location_lng = geometryLocationLng;
placeResult.icon = icon;
placeResult.name = name;
placeResult.place_id = placeId;
this.placesServiceResults.push(placeResult);
});
await console.log('ItinerarySearchPage textSearch placesServiceResults=', this.placesServiceResults);
} else {
if (this.storageLanguage === Language.english) {
this.toastProvider.presentWarningToast(ToastMessage.enSearchPlaceQueryFail);
} else {
this.toastProvider.presentWarningToast(ToastMessage.zhSearchPlaceQueryFail);
}
}
});
}