Google Maps Address autocomplete inside slide box

ionic-v1
1

I have been scratching my heads for the solution: the google maps autocomplete works fine when tested in browser, but does not work when in device. To elaborate, when I click on a suggestion popup for an address in the browser, the clicked address is automatically put into the text input box. However, when tested in device, clicking on a suggestion does not auto fill the input.

I have implemented the pac-item dom insertion fix and also the z-index fix, but none of them work. Any suggestion?

I am not creating a codepen because when seen in browser, things work just fine, but when deployed to device, only then this problem crops up.

Many thanks.

3 Likes
2

bump
There are few threads about this issue on the forum-- This used to work with ionic pre-beta, not sure if this is on the radar for ionic devs, google’s autocomplete is a key feature in my app.

3

Same problem here. I’m using the ngAutocomplete directive.

Everything works fine on the desktop:

And this is what happens on mobile:

Here a plunker:

You can test this behavior on mobile obviously and also with the chrome dev tools device emulation (Version 37.0.2041.4 dev).

4

Exactly same thing happens with me. Weird thing is, I tried with two different OS versions of Samsung Galaxy S4, one with a custom ROM, other without, and it works on the regular rom but doesnt work on the custom rom. But dont get excited: it does not work on the ios simulator either. So definitely there is something that needs to be done from ionic’s perspective :frowning: . Hope someone will find a solution.

5

Hi, I am confirm this behavior. This worked on my Nexus 5 pre-beta. Hope this gets fixed soon. Thanks.

6

btw. it works if you click/touch for two seconds.
(with the chrome dev tools device emulation: mousedown until the context menu gets triggered, then click again and the entry gets selected.)

Should we perhaps open an issue on github about this problem?

7

I have been trying to implement this in angularjs + ionic using the following js:
http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js

however, I am unable to get this to work in mobile (works fine in the web). Experiencing the same issue faced by ch000. Can anyone provide an update on this? Is there a fix available for this?

This is preventing me from using ngAutocomplete to implement google places autocomplete in my mobile app.

Thanks.

8

Hi Ch000,

Do you know if a github issue has been logged for this? Have you found a solution for this?

Thanks.

Sincerely,
Ionman

9

hi @ionman
Haven’t found a solution so far.

Here the github issue i just filed https://github.com/driftyco/ionic/issues/1798

10

Anyone ever solved this problem ?

I have the latest ionic *** beta.11, and on browser fine, but on iPhone viewing the same content in the iPhone safari browser I am unable to select address from Google Popup.

Thanks,
-FK

11

While digging into it, where on one side iOS simulator and another connected safari debugger I found following and maybe somebody more javascript/ css experienced might tell why.
I can make it every time work if I do several manual steps in debugger:

  • Make sure that this .pac-container has style *pointer-events set to auto/all [on modal we have none]
  • The div.pac-container has set data-tap-disabled to true
    - Here the disableTab directive did not work for me since it was executed and this google container was not present in DOM yet.
    - I think better put this code from disableTab into ngAutocomplete code. At some point it always there + I would search for .pac-item and then go up to parent - to be sure I have the active container.
  • Once you select a item from popup and CLICK MANUALLY on KEYBOARD DONE [to hide it] the item is selected and set correctly.

And this keyboard is probably the main issue for me now considering that I can deal with data-tap-disabled
I saw that there is some custom ionic touch event handling and it could be the issue in this one ?
I see the item from popup is selected But keyboard is still available it does not hide itself after I click. if I hide it manually the ngAutocomplete retrieve correct data.

Any thoughts ?

Frank

12

I am having the same issue on my new android phone, really annoying…

13

Now it works for me, if I follow workaround I described.

Select item , then manually hide keyboard.

The place to add setting datatabdisabled I am hacking directly in the code just before I show modal dialog with slide box.

even I do not like the solution but it works :wink: I am not so skill angular user nor ionic, but this was first that worked for me. I am sure that might be something nicer. I need to learn about directives :wink: maybe there is a away to have directive directly on the input field that is executect at the time input field is rendered and here you modify the pac container.

14

My issue is that I am using no library for the autocomple but just the tut provided by google: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

This is how my elements look:

    <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input id="pac-input" type="search" placeholder="Enter a location"/>
    </label>

Any idea how I can make it work in my case?

15

This is more angular question then then ionic ;-). and My level is not that great to support angular…
So to help also other that my join this discussion, what is your issue then ?

What it does or what it does not do for you ?

-Fk

16

Just the same as your issue,I can only select an item if I long click on it, in the browser it only needs a fast click :slight_smile:

17

For example browser is ok for me it works with out problem just mobile is the issue where i had to do some workaround

18

Hey

This is my .pac-container:

<div class="pac-container hdpi" style="width: 262px; position: absolute; left: 35px; top: 80px; display: none;" data-tap-disabled="true"></div>

As you can see it has the data-tap-disabled set to true and I’ve also added this to my stylesheet:

.pac-container{
pointer-events: auto;
}

But now when I click on a location item it just stays open including the keyboard, any thoughts?

19

This is what I described earlier. You select an item and then you have to manually hide keyboard. As workaround it works. Once you close keyboard the ngAutocomplete will be fired you get your data.

There is somem issue in IONIC.
When you track this down, when you click on the item you can see it normally files
touchStart, and etcs… but its gets eaten by ionic and nothing.

-Fk

20

Ow ok indeed this is the issue, I am trying to automate this process in code:

 $scope.itemClicked = function () {
        console.log("Item clicked");
        cordova.plugins.Keyboard.close();
        document.getElementById('map-canvas').click();
    };

    $timeout(function () {
        document.querySelector('div.pac-container').setAttribute('data-tap-disabled', 'true')

        var classname = document.getElementsByClassName("pac-container");

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('click', $scope.itemClicked, false);
        }
    }, 500);

cordova.plugins.Keyboard only works for iOS it seems… I found this lib for android: https://github.com/phonostar/PhoneGap-SoftKeyboard but for me it does not work :frowning:

But this does not seems to work, do you have a solution?

1 Like