ionic4-auto-complete icon indicating copy to clipboard operation
ionic4-auto-complete copied to clipboard

[BUG]: Not able to make it work with google places library in Ionic

Open SumeetHindinkeri opened this issue 4 years ago • 2 comments

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 avatar Oct 05 '20 07:10 SumeetHindinkeri

@SumeetHindinkeri can you share your full provider code?

jrquick17 avatar Apr 12 '21 16:04 jrquick17

@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.

SumeetHindinkeri avatar Apr 20 '21 08:04 SumeetHindinkeri