'Cannot read property 'Autocomplete' of undefined while using google-places api

I want to get LatLng of entered address in textbox. I am using google map api for it. By writing only new google.maps.places.Autocomplete({}) I am getting Cannot read property 'places' of undefined this error.

Below is my code:

@ViewChild('addressText') addressText: any;

ngAfterViewInit() {
   this.getPlaceAutocomplete();
}

getPlaceAutocomplete() {
    const autoComplete = new google.maps.places.Autocomplete(this.addressText.nativeElement, {
      types: this.addressText.nativeElement.value
    })
    // google.maps.event.addListener(autoComplete, 'place_changed', () => {
    //   const place = autoComplete.getPlace();

    //   console.log('places... ', place);
    // })
  }

html file:

<input matInput placeholder="Locations" class="input" formControlName="text" #addressText>

Please help me out.

Solution 1:^[1]

The error is because of 'autocomplete' object is not created.

You need to defined a id for'input' tag.
Just giving you a basic example.

HTML:

<input matInput placeholder="Locations" class="input" formControlName="text" id="addressText">

JS:

autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('addressText'), {types: ['geocode']});

For further details please go the through docs google api autocomplete

Solution 2:^[2]

I Faced The Same Issue And I was forgot to add &libraries=places after my key src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Saima Haji
Solution 2	Shahzaib Naseer

'Cannot read property 'Autocomplete' of undefined while using google-places api

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]