Google places autocomplete not loading

We are working on an angular project that uses the google places autocomplete to search addresses in the US. We have included the google places library in the index.html file. It was working as expected but lately the team has been facing an issue where the autocomplete component would not load and when the user clicks in to type an address it would show the following error

This page can't load Google Maps

Below is the code for reference


HTML

<div fxLayout="row" fxFlex>
<div fxLayout="row" fxLayoutAlign="start center" class="add-search-input-container">
<mat-icon matPrefix style="color: #757575;">search</mat-icon>
<input [disabled]="googleForm.disabled" id="addressGooglePlaces-addressAutocomplete" matInput
placeholder="Search address here or enter below" [(ngModel)]="autocompleteInput" #addresstext
style="margin-left: 6px;">
</div>
<button id="addressGooglePlaces-null-btn" style="display: none;"></button>
</div>


TypeScript


private getPlaceAutocomplete() {
const center = { lat: this.latitude, lng: this.longitude };

const defaultBounds = {
north: center.lat + this.radius,
south: center.lat - this.radius,
east: center.lng + this.radius,
west: center.lng - this.radius,
};

if (this.restrictAddressSearchToServiceableCitiesAndStates) { // this is to show the all USA address in search bar

const autocomplete: any = new google.maps.places.Autocomplete(this.addresstext?.nativeElement,
{
fields: ["address_components", "formatted_address"],
types: [this.adressType] // 'establishment' / 'address' / 'geocode'
});

google.maps.event.addListener(autocomplete, 'place_changed', () => {
this.place = autocomplete.getPlace();
this.checked = true;
this.invokeEvent(this.place);
});
}
else {
const autocomplete: any = new google.maps.places.Autocomplete(this.addresstext?.nativeElement,
{
bounds: defaultBounds,
strictBounds: true,
// componentRestrictions: { country: 'US' },
fields: ["address_components", "formatted_address"],
types: [this.adressType] // 'establishment' / 'address' / 'geocode'
});

if (this.restrictToCountries !== "") {
autocomplete.setComponentRestrictions({
country: [this.restrictToCountries],
});
}

google.maps.event.addListener(autocomplete, 'place_changed', () => {
this.place = autocomplete.getPlace();
this.checked = true;
this.invokeEvent(this.place);
});
}
}

Continue reading...