I am using google place autocomplete and it's working fine. But I need to add some custom addresses from DB. I did it by custom HTML by catching google place autocomplete CSS class name like (.pac-container).
@ViewChild('addressSearch') addresstext!: ElementRef;
chnageAddress(event: any) {
this.aa = (<HTMLElement>document.querySelector('.pac-container'));
let item = '<div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">Local Address </span>1</span><span></span></div>';
item += '<div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">Local Address </span>2</span><span></span></div>';
this.aa.innerHTML = item;
(<HTMLElement>document.querySelector('.pac-item')).addEventListener('click',
this.showMap.bind(this));
}
showMap() {
alert('action from custom place');
}
getPlaceAutocomplete() {
const autocomplete = new google.maps.places.Autocomplete(this.addresstext.nativeElement,
{
types: ['establishment', 'geocode']
});
google.maps.event.addListener(autocomplete, 'place_changed', () => {
this.ref.detach();
setInterval(() => { this.ref.detectChanges(); }, 200);
});
}
<div class="input-group">
<input (input)="chnageAddress($event);" formControlName="addressSearch" type="text"
placeholder="search address" #addressSearch id="addressSearch" class="form-control"
leftTrim>
<span class="input-group-text">
<i class="icon-target"></i>
</span>
<img src="assets/images/pwb-google-maps.svg" alt="" class="powered-by-logo">
</div>
Now the problem is custom event not fired for my custom address. I have tried in different ways.
Note: Google place autocomplete default change event working only for goole address not custom address.
Someone tell me where is my wrong and who to solve, Thanks to all.