How to get google.maps.places.Autocomplete working on iOS?

[ivo.centric]

We want to use the google.maps.places.Autocomplete functionality in a Sencha app. It's working on Chrome/PC and Safari/OSX. But on a iOS (tested v5.1) it is not working properly: if you type something in the box and taps on one of the suggestions in the suggestion box (generated by google) then the selected suggestion is not taken: the suggestionbox disappear and nothing happens. It looks like some blur/focus event of Sencha is fired before google can/will handle the touchstart (?) event. To reproduce we have created the folowing testcode (removed Sencha text field and Map and uses plain input box but placed in a Sencha container):

app.js:

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    views: [
        'MyContainer'
    ],
    name: 'GMap',
    launch: function() {
        Ext.create('GMap.view.MyContainer', {fullscreen: true});
    }
});

app/view/MyContainer.js

Ext.define('GMap.view.MyContainer', {
    extend: 'Ext.Container',
    alias: 'widget.myContainer',


    config: {
        html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
        listeners: [
            {
                fn: 'onContainerInitialize',
                event: 'initialize'
            }
        ]
    },


    onContainerInitialize: function(component, options) {

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
    }
});

If you use this without Sencha it works.

Does anyone know how to make this work on iOS? Any suggestion where to look ?

[Null]

I'm banging my head against the wall with this one as well, have you managed to get anywhere?

[Null]

Has anyone else experienced this?

[ivo.centric]

I'm banging my head against the wall with this one as well, have you managed to get anywhere?

still no success

[Null]

How are you currently working around it? Or are you not and you're just not allowing the auto address validate?

[ivo.centric]

We postponed it, working on other functionalities. But we have to pick it up again in the near future and see if we can solve it or working around it......

[Null]

I'd be very interested to hear where you end up with this, I'm currently contemplating writing my own textbox/selectbox that places requests manually on keyup (basically re-inventing the wheel) which is bound to be less efficient and clunky

[Null]

anyone else able to shed any light on this?

[abhisharma2]

Hey ivo_centric have you guys figured this out yet? we are running into the exact same problem...having to use the search keyword functionality that Google provides, but that is infinitely worse than autocomplete. Its a workaround, but I'd rather not --

[twostrel]

You can get Google Places Autocomplete to work with Sencha by setting the viewport's 'autoBlurInput' config value (from viewport/Default.js) to false in your Ext.application() (or Ext.setup()) statement.

Change viewport/Default.js as below

Ext.application({

viewport: {

autoBlurInput: false

}

});

Note that autoBlurInput is market as private so use at your own risk.

We want to use the google.maps.places.Autocomplete functionality in a Sencha app. It's working on Chrome/PC and Safari/OSX. But on a iOS (tested v5.1) it is not working properly: if you type something in the box and taps on one of the suggestions in the suggestion box (generated by google) then the selected suggestion is not taken: the suggestionbox disappear and nothing happens. It looks like some blur/focus event of Sencha is fired before google can/will handle the touchstart (?) event. To reproduce we have created the folowing testcode (removed Sencha text field and Map and uses plain input box but placed in a Sencha container):

app.js:

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    views: [
        'MyContainer'
    ],
    name: 'GMap',
    launch: function() {
        Ext.create('GMap.view.MyContainer', {fullscreen: true});
    }
});

app/view/MyContainer.js

Ext.define('GMap.view.MyContainer', {
    extend: 'Ext.Container',
    alias: 'widget.myContainer',


    config: {
        html: '<div> <input id="searchTextField" type="text" size="50"> </div>',
        listeners: [
            {
                fn: 'onContainerInitialize',
                event: 'initialize'
            }
        ]
    },


    onContainerInitialize: function(component, options) {

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
    }
});

If you use this without Sencha it works.

Does anyone know how to make this work on iOS? Any suggestion where to look ?