Places Data from Google API Refresh Late

@laxapphome wrote:

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?

Screen Shot 2019-10-09 at 7.49.02 AM.png290×532 8.98 KB

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

Screen Shot 2019-10-09 at 7.50.59 AM.png296×530 20 KB

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);
        }
      }
    });
  }

Posts: 1

Participants: 1

Read full topic