Cómo rellenar campos automáticamente con Google

Resumen

Aprende a implementar un autocompletado de direcciones con Google que rellena calle, ciudad y país de forma automática. Verás cómo una directiva de clic dispara la función seleccionar dirección y cómo realizar el binding de los datos del record al modelo. Además, se cierra el tema de RxJS y se anticipa el despliegue en Firebase hosting.

¿Cómo funciona el autocompletado y el binding de campos?

Al escribir el nombre del negocio o una dirección y elegir una sugerencia, los tres campos del formulario se completan sin esfuerzo. La clave está en capturar el resultado completo que devuelve Google y mapearlo a los atributos del lugar que vas a guardar.

Escribir el nombre del negocio o dirección en el input.
Hacer clic en una sugerencia de autocompletado.
Rellenado automático de calle y número, ciudad y país.
Proceso simple de replicar con pequeños ajustes.
Enfoque centrado en pasar el resultado completo del record seleccionado.

¿Qué hace la directiva de clic y la función seleccionar dirección?

En el HTML se define una directiva de clic que ejecuta la función seleccionar dirección. Como parámetro, se envía el resultado completo que llega de Google para el record seleccionado. Así se evita perder información relevante durante el mapeo.

La función imprime la selección para inspeccionar qué contiene.
Se asignan los atributos del lugar: calle, ciudad y país.
Se realiza el binding directo de cada parte del resultado a su campo correspondiente.
El objetivo es guardar un objeto de lugar coherente y completo.

¿Qué sigue con RxJS y hosting en Firebase?

Con esta implementación queda cerrado el tema de RxJS en el flujo de autocompletado y data binding. El siguiente paso es preparar el despliegue: subir la aplicación al hosting de Firebase, optimizando así el proceso de publicación.

¿Quieres profundizar en el mapeo de datos del autocompletado o en el despliegue en Firebase hosting? Comparte tus dudas y comentarios para seguir la conversación.

Juan Diego Brocca

student•

Mi solución fue esta, ya que a veces no coinciden con los arrays

seleccionarDireccion(result) {
    const addressComponents = result.address_components
    const adrressParams: any = {}
    for (let i = 0, len = addressComponents.length; i < len; i++) {
      const type = addressComponents[i].types[0].toString()
      switch (type) {
        case 'street_number':
          adrressParams.street_number = addressComponents[i].long_name
          break
        case 'route':
          adrressParams.route = addressComponents[i].long_name
          break
        case 'locality':
          adrressParams.locality = addressComponents[i].long_name
          break
        case 'country':
          adrressParams.country = addressComponents[i].long_name
          break
      }
    }
    this.lugar.calle = `${adrressParams.route} ${adrressParams.street_number}`
    this.lugar.ciudad = adrressParams.locality
    this.lugar.pais = adrressParams.country
  }+

Mauro Petrini

student•

Yo realice el curso utilizando la ultima version de Angular (v6.0) y Bootstrap 4.

Si les interesa acá les dejo el repo para ver el codigo

Repo PlatziSquare - Angular 6

Carlos Enrique Ramírez Flores

student•

mi solucion con angular 6 publicado el 12/07/2018. aun tiene muchos detalles el codigo.

crear.component.ts

import { Component } from '@angular/core';
import { LugaresService } from "../services/lugares.service"
import { ActivatedRoute } from "@angular/router"
import { Observable }  from "rxjs"
import * as Rx from 'rxjs';
import { FormControl } from "@angular/forms"
import {Http} from '@angular/http'
import { switchMap, map } from 'rxjs/operators';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html'
})
export class CrearComponent {
	lugar:any = {}
	id:any = null;
	results$: Observable<any>;
	private searchField: FormControl;
    constructor(private lugaresService: LugaresService, private route: ActivatedRoute, private http:Http){
        this.id = this.route.snapshot.params['id'];
        if(this.id != 'new'){
            this.lugaresService.getLugar(this.id)
            	.valueChanges()
                .subscribe((lugar)=>{
                    this.lugar = lugar;
                });
        }
        const _URL = 'https://maps.googleapis.com/maps/api/geocode/json'
        this.searchField = new FormControl()
        this.results$  = this.searchField.valueChanges
        	.pipe(
        		switchMap(query => this.http.get(`${_URL}?address=${query}`))
        		,map(response => response.json().results)

        	);
        this.results$.subscribe()
    }
    seleccionarDireccion(direccion){
    	this.lugar.domicilio = ''
		this.lugar.ciudad = ''
		this.lugar.pais = ''
    	let result = direccion.address_components
    	let $_x=0;
    	while($_x <= result.length){
    		console.log(result[$_x])
    		if(result[$_x].hasOwnProperty('types')){
	    		if($_x<3 && (result[$_x].types[0]==='political'
	    			|| result[$_x].types[0]==='administrative_area_level_2'
	    			|| result[$_x].types[0]==='street_number'
	    			|| result[$_x].types[0]==='locality'
	    			|| result[$_x].types[0]==='route'))
	    			this.lugar.domicilio += result[$_x].long_name+" "
	    		if(result[$_x].types[0]==='locality'
	    		  || result[$_x].types[0]==='administrative_area_level_1')
	    			this.lugar.ciudad = result[$_x].long_name
	    		if(result[$_x].types[0]==='country')
	    			this.lugar.pais = result[$_x].long_name
    		}
    		$_x++
    	}
    }
	guardarLugar() {
		var direccion = this.lugar.direccion+','+this.lugar.ciudad+','+this.lugar.pais
		this.lugaresService.obtenerGeoData(direccion)
		    .subscribe((result)=>{
		    	this.lugar.lat = result.json().results[0].geometry.location.lat
		    	this.lugar.lng = result.json().results[0].geometry.location.lng
				if(this.id != 'new'){
					this.lugaresService.editarLugar(this.lugar)
					alert('exito al editar')
				}else{
					alert(this.lugar.id);
					this.lugaresService.guardarLugar(this.lugar)
					alert('exito al guardar')
				}
				this.lugar = {}
		    })
	}
}

crear.component.html

<div class="well">
	<a routerLink="/lugares">Lugares</a> / crear lugar
</div>
<div class="container">
	<div class="row">
		<div class="col-md-6 col-sm-6">
		</div>
		<div class="col-md-6 col-sm-6">
			<div class="panel panel-default">
  				<div class="panel-body">
					<form action="">
						<div class="form-group">
							<label for="Nombre">Nombre del negocio</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.nombre" name="Nombre">
							</div>
						</div>
						<div class="form-group">
							<label for="Plan">Plan</label>
							<select name="Plan" id="Plan" class="form-control" [(ngModel)]="lugar.plan">
								<option value=""></option>
								<option value="pagado">Pagado</option>
								<option value="gratis">Gratis</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Cercania">Cercania</label>
							<select name="Cercania" id="Cercania" class="form-control" [(ngModel)]="lugar.cercania">
								<option value=""></option>
								<option value="1">Muy cercas</option>
								<option value="2">Cercas</option>
								<option value="3">Lejos</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Distancia">Distancia en km</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="number" min="1" step="0.1" class="form-control" [(ngModel)]="lugar.distancia" name="Distancia" >
							</div>
						</div>
						<div class="form-group">
							<label for="status">Status</label>
							<select name="status" id="status" class="form-control" [(ngModel)]="lugar.status">
								<option value=""></option>
								<option value="1">Activo</option>
								<option value="2">Inactivo</option>
							</select>
						</div>
						<div class="form-group">
							<label for="Descripcion">Descripción del negocio</label>
							<textarea name="Descripcion" class="form-control" [(ngModel)]="lugar.descripcion" rows="4"></textarea>
						</div>
						<hr>
						<h3>Datos de direccion</h3>
						<div class="well">
							<form action="">
								<label>Buscar direccion en Google Maps</label>
								<input type="text" [formControl]="searchField" class="form-control">
							</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>
						<div class="form-group">
							<label for="Domicilio">Calle y numero</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.domicilio" name="Domicilio" >
							</div>
						</div>
						<div class="form-group">
							<label for="Ciudad">Ciudad</label>
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-map-marker"></span></span>
								<input type="text" class="form-control" [(ngModel)]="lugar.ciudad" name="Ciudad" >
							</div>
						</div>
						<div class="form-group">
							<label for="Pais">Pais</label>
							<input type="text" class="form-control" [(ngModel)]="lugar.pais" name="Pais" >
						</div>
						<div class="form-group text-right">
							<button class="btn btn-primary" (click)="guardarLugar()" style="margin-right: 10px;">
								<span class="glyphicon glyphicon-send"></span> Enviar
							</button>
							<a class="btn btn-default" routerLink="/lugares">
								<span class="glyphicon glyphicon-remove"></span> Cancelar
							</a>
						</div>

					</form>
				</div>
			</div>
		</div>
	</div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'
import { FormsModule,ReactiveFormsModule  } from '@angular/forms'

import { AgmCoreModule } from '@agm/core'
import { ResaltarDirective } from './directives/resaltar.directive'
import { ContarClickDirective } from './directives/contar-clicks.directive'
import { Routes, RouterModule } from "@angular/router"
import { DetalleComponent } from "./detalle/detalle.component"
import { LugaresComponent } from "./lugares/lugares.component"
import { ContactoComponent } from "./contacto/contacto.component"
import { CrearComponent } from "./crear/crear.component"

import { LugaresService } from "./services/lugares.service"

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';

import { HttpModule } from '@angular/http'

import { LinkyfystrPipe} from './pipes/linkifystr.pipe'

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LoginComponent } from './login/login.component';
import { RegistroComponent } from './registro/registro.component';

import { AutorizacionService } from './services/autorizacion.service'

import { AngularFireAuthModule } from 'angularfire2/auth'
import { MyGuard } from './services/my-guard.service'


const appRoutes: Routes = [
  { path: '', component: LugaresComponent },
  { path: 'lugares', component: LugaresComponent },
  { path: 'detalle/:id', component: DetalleComponent },
  { path: 'contacto', component: ContactoComponent },
  { path: 'crear/:id', component: CrearComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registro', component: RegistroComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective,
    ContarClickDirective,
    DetalleComponent,
    LugaresComponent,
    ContactoComponent,
    CrearComponent,
    LinkyfystrPipe,
    LoginComponent,
    RegistroComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyC5Cd6Tiu3oqs69v1GDk5_aTCwOk8B8ZIM'
    }),
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    HttpModule,
    BrowserAnimationsModule,
    AngularFireAuthModule,
    ReactiveFormsModule
  ],
  providers: [LugaresService, AutorizacionService,MyGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Roberto Antonio González Medina

student•

Esta fue mi solucion, ya que el objeto que te retorna la api de Google Maps las posiciones varian del array ‘addressComponents’, habria que ver en el array de ‘types’ si cuenta con el que necesitamos.

Aca dejo el codigo que me funciono a mi

html

<h3>Datos de direccion</h3>
<div class="well">
  <form>
    <label for="">Buscar Negocio en Google</label>
    <input input="text" class="form-control" [formControl]="searchField">
  </form>
  <ul class="list-group">
    <li *ngFor="let result of results$ | async" class="list-group-item" (click)="llenarDatosDireccion(result)">
      {{result.formatted_address}}
    </li>
  </ul>
</div>

<label>Calle y Número</label>
<input type="text" class="form-control" [(ngModel)]="lugar.calle">
<br>
<label>Ciudad</label>
<input type="text" class="form-control" [(ngModel)]="lugar.ciudad">
<br>
<label>Pais</label>
<input type="text" class="form-control" [(ngModel)]="lugar.pais">

llenarDatosDireccion(direccion: any) {
  let calle = direccion.address_components.find(element => element.types[0] === 'route') || {long_name: ''};
  let numero = direccion.address_components.find(element => element.types[0] === 'street_number') || {long_name: ''};
  let ciudad = direccion.address_components.find(element => element.types[0] === 'administrative_area_level_2') || {long_name: ''};
  let pais = direccion.address_components.find(element => element.types[0] === 'country') || {long_name: ''};

  this.lugar.calle = `${calle.long_name} ${numero.long_name}`;
  this.lugar.ciudad = ciudad.long_name;
  this.lugar.pais = pais.long_name;
}

Fabián Veliz

student•

Aquí les dejó mi solución, ya que los indexes no siempre coinciden con el campo que buscamos:

private selectResult(result) {
    const addressComponents = result.address_components;
    this.place.street = `${this.findPlaceInResults('route', addressComponents)} ${this.findPlaceInResults('street_number', addressComponents)}`;
    this.place.city = this.findPlaceInResults('locality', addressComponents);
    this.place.country = this.findPlaceInResults('country', addressComponents);
  }

  private findPlaceInResults(place, addressComponents) {
    const result = addressComponents.find(address => address.types.includes(place));
    return result ? result.long_name : '';
  }

Usuario anónimo

user•

Solucion:

seleccionarDireccion(result) {
    const addressComponents = result.address_components
    const adrressParams: any = {}
    for (let i = 0, len = addressComponents.length; i < len; i++) {
      const type = addressComponents[i].types[0].toString()
      switch (type) {
        case 'street_number':
          adrressParams.street_number = addressComponents[i].long_name
          break
        case 'route':
          adrressParams.route = addressComponents[i].long_name
          break
        case 'locality':
          adrressParams.locality = addressComponents[i].long_name
          break
        case 'country':
          adrressParams.country = addressComponents[i].long_name
          break
      }
    }
    this.lugar.calle = `${adrressParams.route} ${adrressParams.street_number}`
    this.lugar.ciudad = adrressParams.locality
    this.lugar.pais = adrressParams.country
  }

Carlos Uriel de Jesus Sánchez González

student•

codigo interesante

Luis Fernando Niño Gonzalez

student•

Estoy usando ngbTypeahead y no he podido limpiar el campo de texto cuando no se selecciona un elemento de la lista que trae, alguna sugerencia??

Diego Forero

Team Platzi•

Lanza algún error en consola, o simplemente no hace nada?

Luis Fernando Niño Gonzalez

student•

No da error alguno

Cómo rellenar campos automáticamente con Google

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS