Fix for Google AutoComplete Places Javascript API on iOS

gp-autocomplete.js

var autoElm = document.getElementById('elm-name');
autocomplete = new google.maps.places.Autocomplete(autoElm);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
        return;
    }

    instance.setCenter(place.geometry.location);
    instance.setZoom(19);
    autoElm.value = '';

});


// need to stop prop of the touchend event
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    setTimeout(function() {
        var container = document.getElementsByClassName('pac-container')[0];
        container.addEventListener('touchend', function(e) {
            e.stopImmediatePropagation();
        });
    }, 500);
}

@claudioviola, my issue was with fastclick not allowing the touch event from autocomplete to call the place_changed. You have to add 'needsclick' class to the element, but you cant add after init of the autocomplete function. So I ended up using this solution http://stackoverflow.com/a/20056569 from Devin.

Although I just realized that Mutation Observer is not supported in LT IE 11.

I have tried adding "needsclick" class to .pac-items and .pac-item spans, tried adding stopImmediatePropagation() to touchend events. Absolutely nothing works. Has anybody solved the problem recently?

Even i'm banging my head to fix this issue. Any help is super appreciated.

Worked for me in context : cordova + ios.
Thank you !

@schoenobates Thank You for your solution.
Using this solution I had one issue that as it is stoping the action, it is changing the text and closing the list after tapping, it only changes the value only when tapped outside. So I added few code to do that. Please find it below.

                           setTimeout(function() {
			        var container = document.getElementsByClassName('pac-container')[0];
			        console.log(container);
			        container.addEventListener('touchstart', function(e) {
			            e.stopImmediatePropagation();
			            setTimeout(function(){alert('j');document.activeElement.blur();},300);
			            
			        });
			    }, 500);

Awesome - thanks @souvickcse

It s not working for me!!! Which is the correct solution? Thanks

It is not working for me.

const id = document.getElementById(_self.id);
_self.autocomplete = new google.maps.places.Autocomplete(document.getElementById(_self.id), {
types: [_self.type]
});
_self.autocomplete.addListener('place_changed', _self.fillInAddress);
setTimeout(function () {
const container = document.getElementsByClassName('pac-container')[0];
console.log(container);
container.addEventListener('touchstart', function (e) {
e.stopImmediatePropagation();
setTimeout(function () {
document.activeElement.blur();
}, 300);
});
}, 500);

ionic 3 does not work with native Google maps, anyone knows how to fix the issue?

Someone fix this issue in ionic 3?

Not working for me on iOS

Hello MarinoRaul,
Did you solve your issue and if so, what did you do ?

@schoenobates Thank You for your solution.
Using this solution I had one issue that as it is stoping the action, it is changing the text and closing the list after tapping, it only changes the value only when tapped outside. So I added few code to do that. Please find it below.

                           setTimeout(function() {
			        var container = document.getElementsByClassName('pac-container')[0];
			        console.log(container);
			        container.addEventListener('touchstart', function(e) {
			            e.stopImmediatePropagation();
			            setTimeout(function(){alert('j');document.activeElement.blur();},300);
			            
			        });
			    }, 500);

worked for me ty. (just make sure to have it on the right page that has this element

Hi, I am having the same issue. Tried the solutions above.
Does anybody has a different solution?

The original code worked for me:

// need to stop prop of the touchend event
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
    setTimeout(function() {
        var container = document.getElementsByClassName('pac-container')[0];
        container.addEventListener('touchend', function(e) {
            e.stopImmediatePropagation();
        });
    }, 500);
}

Thanks @schoenobates !

Works perfect! Thanks man!! I fking love you

It working on PC but not working on Android Mobile https://romanczujko.github.io/PayForDistance/

google.maps.event.addDomListener(window, 'load', function () {
var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places'));
var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places'));

        google.maps.event.addListener(from_places, 'place_changed', function () {
            var from_place = from_places.getPlace();
            var from_address = from_place.formatted_address;
            $('#origin').val(from_address);
        });