Google Places Autocomplete on an ion-input component in Ionic

Ionic Framework ionic-v3
1

I’ve been trying to implement the Google Places Autocomplete functionality in an Ionic 2 app. I have got it to work successfully as described here:

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

i.e in my html I have a field:

<input id="journey_from" name="journey_from" type="text" placeholder="">

and in my component I have:

ngOnInit() {

let input_from = (<HTMLInputElement>document.getElementById("journey_from"));
let options = {
      types: [],
      componentRestrictions: {country: "uk"}
    }

google.maps.event.addListener(autocomplete1, 'place_changed', function() {
      console.log("FROM CHANGED!");
      etc etc etc

}

This all seems to work fine. However if I try and use an ion-input instead of a straight input tag e.g

<ion-item>
      <ion-label stacked>From</ion-label>
      <ion-input id="journey_from" name="journey_from"  type="text" placeholder="" ></ion-input>
</ion-item>

then it doesn’t quite work. When you start typing an address in a field the matching addresses appear ok in a drop down list but if I select one, the ion-item field is not populated. I’ve tried binding to a model and setting the value in the event listener but this won’t work. It seems like that event listener is not running. Any ideas how I might get this to work?

[UPDATE] - forgot to say that this (using ion-input) works ok in the browser, its only on a device that it doesn’t work.

2

An ion-input is a wrapper for an input element, you need to find what that input element is and feed that to the Google API.

Check this previous discussion and see if that works for you:

3

Yes, thanks, I’d seen that and used it actually. What I forgot to say was that this works fine in the browser (using ion-item) but not on the device.

4

hey, @richardshergold

I have same issue on iOS devices. Do you know how to fix it?

Thanks!

5

I´ve been able to do an implementation using a modal to load the predictions (which is more user friendly than adding a dropdown to an input), you can follow the code in github https://github.com/guillefd/gmapsAutocomplete-RC1

1 Like
6

<ion-input> adds a wrapper on <input> element. The trick (although not that clean) is to simply grab the hidden input element.

eg. HTML

        <ion-item>
          <ion-label floating>Home Address</ion-label>
          <ion-input id="txtHome" type="text"></ion-input>
        </ion-item>

Javascript/Typescript:

      var nativeHomeInputBox = document.getElementById('txtHome').getElementsByTagName('input')[0];
      let autocomplete1 = new google.maps.places.Autocomplete(nativeHomeInputBox, searchOptions);
2 Likes
7

I have same issue on IOS device. Could anyone help me how to solve?

9

I am also using this Google Places Autocomplete in Segment, If I use this Google Autocomplete in 1st segment its working fine.

But when I use the same in 2nd segment it’s not working.

Can any one help me out with this issue.

Below is my code:

<ion-toolbar no-border-top class="segment-wrap">
   <ion-segment [(ngModel)]="mainLeads">
      <ion-segment-button value="overview">
         Customer Details
      </ion-segment-button>
      <ion-segment-button value="address">
         Re-enter Address
      </ion-segment-button>
   </ion-segment>
</ion-toolbar>

 <div *ngSwitchCase="'overview'">
   <ion-item>
      <ion-label>Address:</ion-label>
      <ion-input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #search id="txtAddress" name="addressbar1" [(ngModel)]="newLead.addressBar"></ion-input>
   </ion-item>
 </div>

  <div *ngSwitchCase="'address'">
     <ion-item>
        <ion-label>Address:</ion-label>
        <ion-input autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #search id="txtAddress" name="addressbar2" [(ngModel)]="newLead.reenteraddressBar"></ion-input>
     </ion-item>
  </div>
10

Up :slight_smile:
Any solutions please ?

11

@Hollywood and @AkashM08 the key is that if you are using a segment (or anything that shows/hides based on template directives [*ngIf, *ngSwitchCase, etc.] you need to remember that the DOM for those elements isn’t even created until you switch to that tab/segment - and if you LEAVE, the DOM elements are deleted.

You therefore need to handle your Google handles appropriately, adding and removing them as appropriate. E.g. to use a Google Places autocomplete with an input box on a second segment, you watch the segment change event and initialize the Autocomplete object after that point.

However, keep in mind that just capturing the change event isn’t enough: There is some time between the event and the DOM elements appearing, and while you can “guess” by using setTimeout, the better thing to do is to use ngAfterViewChecked directly from Angular, instead of the Ionic lifecycle events. Set a flag in the segment change handler, and in ngAfterViewChecked if that flag is true, re-init the Google component and then reset the flag to false.

3 Likes
12

Yes,I have same issue on iOS. Did you got solution ?

13

did you got solution ?

14

Hi guys, I just published a tutorial that includes that.
https://link.medium.com/JA4amAHFJ5

1 Like