Google places library widget using js api loader in angular

Question

I am trying to make an address input field using the google places library. I want to use google-js-api-loader instead of a script tag but I can't seem to make it work. Here is my code so far:

address-autocomplete.component.html

<input
  id="autocomplete"
  type="text"
  pInputText
  [(ngModel)]="inputAddress"
  [style]="{ width: '15rem' }"
/>

address-autocomplete.component.ts

import {} from "@angular/google-maps";
import { Loader } from "@googlemaps/js-api-loader";

@Component({
  selector: "app-address-autocomplete",
  templateUrl: "./address-autocomplete.component.html",
  styleUrls: ["./address-autocomplete.component.scss"],
})
export class AddressAutocompleteComponent implements OnInit {
  inputAddress = "London";
  autocomplete!: google.maps.places.Autocomplete;
  constructor() {}

  ngOnInit() {
    const loader = new Loader({
      apiKey: "API_KEY", // 
      version: "weekly",
      libraries: ["places"],
    });
    loader.load().then((google) => {
      this.autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("autocomplete") as HTMLInputElement
      );
      console.log(this.autocomplete);
//Gs {setTypes: function, setComponentRestrictions: function, getPlace: function, getBounds: function, …}
      console.log(this.autocomplete.getPlace());
//undefined
    });
  }
}

I set the initial value of the input filed, however, it still returns undefined even though the autocomplete variable includes the Autocomplete object. I am probably missing something obvious. Thanks in advance. Edit: spelling

Answer 1

I was looking for a library to handle address autocomplete, I have used your code and changed it a little bit, Try to handle it this way:

loader.load().then((google) => {
        const autocomplete = new google.maps.places.Autocomplete(
            autoCompleteNativeElementRef
        );
        google.maps.event.addListener(autocomplete, 'place_changed', () =>  {
                const place = autocomplete.getPlace();
                console.log(place);
        });
    });