Google Places with Observables in Angular2

Question

I try to use Google Places with Observables in Angular 2.

To do that, I included the Google scripts in the index.html and then I get some inspiration with Observables from http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

<!-- Script included in index.html -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

You can see the whole application there: https://embed.plnkr.co/LQaag2/

I think there is an issue with the events. For example, when the user type "P", nothing appears. But if he clicks on the page or he types "a", then he will see the results of places starting by "P".

Do you have an idea why?

---

app/main.ts

import { platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap'

platformBrowserDynamic().bootstrapModule(AppModule);

app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { GoogleSearchComponent } from './google-search.component'
import { GoogleService } from './google.service';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule],
  declarations: [AppComponent, GoogleSearchComponent],
  providers: [GoogleService],
  bootstrap: [AppComponent]
})
export class AppModule {}

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent { }

app/app.component.html

<google-search></google-search>

app/google-place.ts

export class GooglePlace {
  constructor(public id: string,
              public description: string
  ) {}
}

app/google-search.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { GoogleService } from './google.service';
import { GooglePlace } from './google-place';

@Component({
  selector: 'google-search',
  template: `
    <div>
      <h2>Google Search</h2>
      <input type="text" [formControl]="term">
      <ul>
        <li *ngFor="let item of items | async">{{item.description}}</li>
      </ul>
    </div>  
  `
})
export class GoogleSearchComponent {

  items: Observable<Array<GooglePlace>>;
  term = new FormControl();

  constructor(private googleService: GoogleService) {}

  ngOnInit() {
    this.items = this.term.valueChanges
                 .debounceTime(400)
                 .distinctUntilChanged()
                 .switchMap(term => this.googleService.search(term));
  }
}

app/google.service.ts

import { Injectable } from '@angular/core';
import { GooglePlace } from './google-place';
import { Observable } from 'rxjs/Observable';

declare var google: any;

@Injectable()
export class GoogleService {      
  search(term: string) {
    return new Observable<GooglePlace[]>(observer => {
      let result: GooglePlace[] = [];
      let displaySuggestions = function(predictions: any, status: string) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          alert(status);
          return;
        }
        predictions.forEach(function(prediction: any) {
          result.push(new GooglePlace(prediction.place_id, prediction.description));
        });
        observer.next(result);
        observer.complete();
      };
      if (term) {
        let service = new google.maps.places.AutocompleteService();
        service.getQueryPredictions({ input: term }, displaySuggestions);
      }
    });
  }
}

Answer 1

I just had a very similar problem with google maps. I will share here my answer, all the same, although it is so late.

The problem is because the callback function displaySuggestions of the google maps getQueryPredictions is called outside of the 'angular zone', and so angular doesn't correctly detect the changes inside of it.

The solution is relatively simple. Just 4 little changes to the app/google.service.ts. See the comments.

// import NgZone
import { Injectable, NgZone } from '@angular/core';
import { GooglePlace } from './google-place';
import { Observable } from 'rxjs/Observable';

declare var google: any;

@Injectable()
export class GoogleService {
  // Inject NgZone in the constructor
  constructor(private _ngZone: NgZone) {}
  search(term: string) {
    // save 'this' to a constant or alternatively bind it to the callback function
    const self = this;
    return new Observable<GooglePlace[]>(observer => {
      const result: GooglePlace[] = [];
      const displaySuggestions = function(predictions: any, status: string) {
        if (status !== google.maps.places.PlacesServiceStatus.OK) {
          console.log('GoogleService search: ', status);
          return;
        }
        // Wrap the prediction in the zone
        self._ngZone.run(function() {
          predictions.forEach(function(prediction: any) {
            result.push(
              new GooglePlace(prediction.place_id, prediction.description)
            );
          });
          observer.next(result);
          observer.complete();
        });

      };
      if (term) {
        const service = new google.maps.places.AutocompleteService();
        service.getQueryPredictions({ input: term }, displaySuggestions);
      }
    });
  }
}

Edit: Perhaps you should take out your API key from the plunker, although i suppose that it might not be to serious of a problem, if it is a free one and was created exclusively for the purpose of the example...

Answer 2

don't know if you're still interested but I was facing the same issue today with the bootstrap typeahead. I think I found a solution although I don't think it's the way one should do it. Anyway, my approach was to gather the data and let the data display as if it was static.

  ngOnInit(): void {
//this.recursiveTimeout();
this.items = this.searchTermStream
  .debounceTime(300)
  .distinctUntilChanged()
  .switchMap((term: string) => this.placesService.search(term))

  .catch(() => {
      this.searchFailed = true;
      return Observable.of([])
    }
  )
this.items.subscribe(res => {
  this.places = res; 
  //places is a string array and stores all found places , in your case it 
    would be an array of GooglePlace

  console.log(this.places);
});
}

Then you sould be able to access the data as soon as it is available.

Answer 3

I found an awful solution. In app/google-search.component.ts, I've added the following function :

recursiveTimeout(ms: number = 1000): void {
  setTimeout(() => {
    this.recursiveTimeout(ms);
  }, ms);
}

Then in the ngOnInit function, I call recursiveTimeout:

ngOnInit(): void {
  this.recursiveTimeout();
  // ...
}

With this solution, when the user type "P" (for example):

1. The result will be fetched on the Google API
2. The result will be displayed just after the event recursiveTimeout is triggered (maximum 1000 ms)

I am open to any better solution ;)