Implementando un TypeAhead 2

Como a mi me funcionó al 18/04/19:

const URL = 'https://maps.google.com/maps/api/geocode/json?key= + XXX--KEY--XXX + &address=';
    this.searchField = new FormControl()
    this.results$ = this.searchField.valueChanges
      .pipe(
       debounceTime(300)
       ,switchMap(query => this.http.get(`${URL}?address=${query}`))
       ,map((response: any) => {
        return response.results
        })
      );

Mi solución para Angula 6 (21/11/2018), utilizando **Subject **en vez de FormControl, y haciendo una comprobación previa para que no busque otra vez si el input tiene el mismo texto desde la última llamada.

crear.component.ts

import { Component, OnInit } from '@angular/core';
import { LugaresService } from 'src/services/lugares/lugares.service';
import { ActivatedRoute } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { switchMap, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.scss']
})
export class CrearComponent implements OnInit {
  lugar: any = {};
  results$: Observable<any>;
  private searchField = new Subject<string>();

  constructor(private route: ActivatedRoute, private lugaresService: LugaresService) {
    const id = this.route.snapshot.params.id;
    if (id !== 'new') {
      this.lugar = this.lugaresService.getById(id)
        .subscribe(lugar => this.lugar = lugar);
    }
   }

  ngOnInit() {
    this.results$ = this.searchField.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap((term: string) => this.lugaresService.obtenerGeoData(term)),
      map((response: any) => {
        console.log(response);
        return response.results;
      })
    );
  }

  search(term: string): void {
    this.searchField.next(term);
  }

  guardarLugar() {
    const direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    this.lugaresService.obtenerGeoData(direccion)
      .subscribe((res: any) => {
        this.lugar.lat = res.results[0].geometry.location.lat;
        this.lugar.lng = res.results[0].geometry.location.lng;

        if (!this.lugar.id) {
          this.lugaresService.create(this.lugar);
          this.lugar = {};
        } else {
          this.lugaresService.edit(this.lugar);
        }
      });
  }

}

crear.component.html

<h2>Datos de Dirección</h2>
<div class="alert alert-secondary">
  <form>
    <label>Buscar dirección en Google Maps</label>
    <input type="text" #searchBox class="form-control" (keyup)="search(searchBox.value)">
  </form>
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let result of results$ | async" (click)="seleccionarDireccion(result)">
      {{result.formatted_address}}
    </li>
  </ul>
</div>

Minuto 4:48, Eduardo Ibarra 4 President. No he visto forma más práctica y sencilla de explicar los observables, he conseguido entender en 3 videos lo que no me han sabido otros profesionales en 1 año. Gracias!!!