Unhandled Promise rejection: Array [ ] ; Zone: ; Task: null ; Value: Array [ ] undefined Ionic

Question

I am trying to find the reason why my code does not return the nearby places I have searched(using google placesService). When I inspect my code on the browser, I receive two errors:

1. Unhandled Promise rejection: Array [ ] ; Zone: ; Task: null ; Value: Array [ ] undefined polyfills.js:3:20095

2. Unhandled Promise rejection: Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 10 more… ] ; Zone: ; Task: null ; Value: Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 10 more… ] undefined

If anyone can offer any help. I would just like a list of places nearby to show up in my ion-card and for them to also display on the map as markers.

.ts File

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;
this.marker = [];


@Component({
  selector: 'page-gyms',
  templateUrl: 'gyms.html',
})
export class GymsPage {
  lat :any;
  lng: any;
  map: any;
  places: Array <any>;
  currentLocation: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation:Geolocation) {
  }

  ionViewDidLoad() {
    this.geolocation.getCurrentPosition().then( pos =>{
      this.lat = pos.coords.latitude;
      this.lng = pos.coords.longitude;
    }).catch(err => console.log(err));    

    this.gymMap().then((results : Array<any>) =>{
      for (let i=0; i < results.length; i++){
        this.createMarker(results[i]);
      }
      this.places = results;
    }, (status) => console.log(status));
  }

  gymMap(){
    this.currentLocation = new google.maps.LatLng(this.lat, this.lng);

    let mapOptions = {
      zoom: 10,
      center: this.currentLocation,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(document.getElementById("map"), mapOptions);

    let service = new google.maps.places.PlacesService(this.map);

    let request = {
      location: this.currentLocation,
      radius: '10000',
      types: ["gym"],
      rankBy: google.maps.places.DISTANCE
    };

    return new Promise((resolve, reject) =>{
      service.nearbySearch(request, (results, status)=>{
        if(status == google.maps.places.PlacesService.OK){
          resolve(results);
        }else{
          reject(results);
        }
      });
    });// end of Promise

  }//end of gymMap

  createMarker(place){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: place.geometry.location,
      title: place.name
    });

    console.log(place);

    google.maps.event.addListener(marker, 'click',()=>{
      let InfoWindow = new google.maps.InfoWindow({
        content: place.name
      });
      InfoWindow.open(this.map, marker);
    })
  }// end of createMarker

}//end of GymsPage

.html file

<ion-header>

  <ion-navbar>
    <ion-title>Gyms Nearby</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-buttons start>
    <button ion-button round full (click)="gymMap()">Find Gyms Near Me</button>
  </ion-buttons>

  <div #map id="map"> </div>
  <p>Lat: {{lat}}  Lng: {{lng}}</p>

  <div id="resultList">
    <ion-card>
      <ion-item ng-if = "places">
        Gyms Found: {{places?.length}}
      </ion-item>
    </ion-card>

    <ion-card id="result">
      <ion-item *ngFor = "let place of places; let i = index">
          {{place.icon}} + <br/>{{place.name}} <br/> {{place.vicinity}} <br /> Hours:{{place.opening_hours}} <br /> Average Rating: {{place.rating}}
      </ion-item>
    </ion-card>
  </div>
</ion-content>