¿Cómo agregar Google Locations Autocompletar a su aplicación Angular?

La tarea aquí es agregar Google Locations Autocompletar a su aplicación Angular. Cuando el usuario ingrese texto para una ubicación en el campo de texto, obtendrá recomendaciones de ubicaciones y podrá autocompletar la ubicación. Para lograr el objetivo, utilizaremos el paquete angular ngx-google-places-autocomplete .

¿Qué es ngx-google-places-autocompletar ?

• ngx-google-places-autocompletar a su proyecto angular>

Para npm:

npm install ngx-google-places-autocomplete

Para hilo:

yarn add ngx-google-places-autocomplete

• Agregue biblioteca a su index.html en src de su aplicación de proyecto.

<script src=”https://maps.googleapis.com/maps/api/js?key=<Tu CLAVE API>&libraries=places&language=en”></script>

• Genere una clave de API y coloque esa clave de API en la etiqueta de secuencia de comandos anterior en lugar de <Su CLAVE DE API>.
• • Vaya a https://developers.google.com/places/web-service/get-api-key y siga todos los pasos para crear una clave API.
  • Habilite la API de lugares para su clave de API.
  • Asegúrese de que su API esté habilitada, para habilitar su API, siga los pasos de este enlace https://support.google.com/googleapi/answer/6158841?hl=en .
• Realice las importaciones necesarias de GooglePlaceModule en app.module.ts.

import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({

  imports: [
    GooglePlaceModule
  ],

• En archivo HTML para appcomponent. Defina el código para el campo de entrada, en ese campo de entrada, la función definida por el usuario AddressChange() será llamada por (onAddressChange) pasando $event y las opciones se encargarán del conjunto de países en la array de países del archivo componente.ts.
• En el archivo component.ts , la función definida por el usuario toma formatted_address de $event address que luego se usa para establecer la dirección en el campo de entrada mediante el enlace de interpolación.

Nota: En Country Array, se agregó «AU» para Australia, puede agregar cualquier otro país según usted. 

Implementación:

aplicación.módulo.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import '@angular/compiler';
//import for GooglePlaceModule
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
  
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    //Adding to imports
    GooglePlaceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

aplicación.componente.html

<div class="container">
    <h1>GeeksforGeeks</h1>
    <h2>Google Places Autocomplete</h2>
<input ngx-google-places-autocomplete [options]=
   'options'  (onAddressChange)="AddressChange($event)"/>
{{ formattedaddress }}
</div>

aplicación.componente.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rou';
  //Local Variable defined
  formattedaddress=" ";
  options={
    componentRestrictions:{
      country:["AU"]
    }
  }
  public AddressChange(address: any) {
  //setting address from API to local variable
   this.formattedaddress=address.formatted_address
}
}

Producción:

Ejecute el servidor de desarrollo usando ng serve y escriba alguna ubicación en el campo de entrada para ver las ubicaciones de Autocompletar.