BehaviorSubject.next does not update view with async pipe

I'm trying to get Google Places from the Google JLS API and use BehaviorSubject.next to update my Angular view with an async feed, but the view is not updating.

Actually, sometimes it happens after 15 seconds. sometimes I need to click somewhere. But I'm pretty sure it doesn't update the moment I get results from google servers ... (I console log it).

Here is my search function:

    import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core';
import { LoadingController, NavParams, ViewController, Platform } from 'ionic-angular';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
declare var google;

@Component({
  selector: 'page-new-location-modal',
  templateUrl: 'new-location-modal.html'
})
export class NewLocationModalPage {

  @ViewChild('map') map: ElementRef;

  // ngModel for segment
  googleSearchType: string;

  // Sport retrieved from previous page (newEventForm)
  sport = '';

  // Props used for suggestion func
  mapElem: ElementRef;
  googleService: any;
  places$:BehaviorSubject<any[]>= new BehaviorSubject([]);


  constructor(
    public platform: Platform,
    public viewCtrl: ViewController,
    public loadingCtrl: LoadingController,
    public params: NavParams
  ) {
    console.log('NewLocationModal#constructor');

    // Sport must be retrieved from params
    this.sport = params.get('sport');
  }

  ngAfterViewInit(): void {
    // Init Google service
    this.mapElem = this.map.nativeElement;
    this.googleService = new google.maps.places.PlacesService(this.mapElem);

    // Select Suggestion segment
    this.googleSearchType = 'suggestion';
    // Trigger searchSuggestionsForSport()
    this.searchSuggestionsForSport(this.sport);

  }

  onSegmentChange(segment): void {
    console.log('NewLocationModal#onSegmentChange - Selected segment ', segment.value);

    if (segment.value === 'suggestion') {
      this.searchSuggestionsForSport(this.sport);
    }
  }

  searchSuggestionsForSport(sport: string): void {
    console.log('NewLocationModal#searchSuggestionsForSport - Sport ', sport);

    let location = new google.maps.LatLng(48.862725,2.287592000000018);
    let request = {
      location: location,
      keyword: sport,
      rankBy: google.maps.places.RankBy.DISTANCE
    };

    // Google Places Service


    // NearBy Search
    this.googleService.nearbySearch(request, (places) => {
      // First set of information sent to the async pipe in view
      this.places$.next(places);

      console.log(places);
    });
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

      

        
        
        
      

    

And viewing:

<div *ngFor="let place of places$ | async">
          <ion-card>
            <ion-card-content>
              <ion-card-title>
                {{place.name}} - {{place.rating}}
              </ion-card-title>
              <p>
                {{place.vicinity}}
              </p>
            </ion-card-content>
          </ion-card>
        </div>

      

        
        
        
      

    

Any solution?