ionic4-auto-complete
ionic4-auto-complete copied to clipboard
[BUG]: Not able to make it work with google places library in Ionic
I'm submitting a
- [x ] Bug report
Description
I am trying to use it with get places library of google to show the dropdown of places. I tried with simple function option and function, service option but I get following error. I am getting the results in console log but before that this error popup and dropdown doesn't showup.
core.js:7376 ERROR TypeError: Cannot read property 'length' of undefined
at AutoCompleteComponent.push../node_modules/ionic4-auto-complete/fesm5/ionic4-auto-complete.js.AutoCompleteComponent.removeDuplicates (ionic4-auto-complete.js:530)
at AutoCompleteComponent.push../node_modules/ionic4-auto-complete/fesm5/ionic4-auto-complete.js.AutoCompleteComponent.setSuggestions (ionic4-auto-complete.js:633)
at ionic4-auto-complete.js:317
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26760)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
at ZoneTask.invoke (zone.js:487)
at timer (zone.js:3070)
I am trying with following code:
let addresses = [];
new google.maps.places.AutocompleteService().getPlacePredictions({
input: addressQuery,
componentRestrictions: {},
// bounds: defaultBounds
}, (predictions) => {
console.log(predictions);
addresses = predictions;
return addresses;
})
Version Information
ionic4-auto-complete: 2.7.1
@angular/cli: 8.1.3
@SumeetHindinkeri can you share your full provider code?
@jrquick17 The code that I posted above was actually my provider code with getResults function like below:
export class MapService implements AutoCompleteService {
public getResults(addressQuery) { let addresses = []; new google.maps.places.AutocompleteService().getPlacePredictions({ input: addressQuery // bounds: defaultBounds }, (predictions) => { console.log(predictions); addresses = predictions; return addresses; }) } }
And html code:
<ion-auto-complete *ngIf='isEditable' [dataProvider]='mapService' (itemSelected)='onAddressInput($event)' (ngModelChange)='clearInput()' [options]='{ placeholder : lAddressPlaceholder, debounce : "1000", clearIcon:"null"}' [autoFocusSuggestion]='false' [(ngModel)]='address'>
Though I moved to different plugin afterwards.