Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fix for Google AutoComplete Places Javascript API on iOS
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);
}
@IOZ

This comment has been minimized.

Copy link

IOZ commented Jun 3, 2016

Thank you, it works.

@Superman2971

This comment has been minimized.

Copy link

Superman2971 commented Sep 13, 2016

Thank you for this great fix

@claudioviola

This comment has been minimized.

Copy link

claudioviola commented Dec 3, 2016

I'm tring your fix but in the callback "place_changed" of autocomplete I don't receive the event.
I receive only the touchend event...

@iforgotbetter

This comment has been minimized.

Copy link

iforgotbetter commented Dec 3, 2016

@claudioviola, having the same issue. Does not recognize the place_changed event on Chrome dev tools w/ user agent, on iOS 8.2 simulator Safari or iOS 9 device Chrome & Safari. However the auto complete test here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform does work. I am looking into their code on that page too see what I can find.

@iforgotbetter

This comment has been minimized.

Copy link

iforgotbetter commented Dec 3, 2016

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

@lightheaded

This comment has been minimized.

Copy link

lightheaded commented Apr 8, 2017

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?

@shirishpickup

This comment has been minimized.

Copy link

shirishpickup commented May 9, 2017

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

@balooval

This comment has been minimized.

Copy link

balooval commented Jul 6, 2017

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

@souvickcse

This comment has been minimized.

Copy link

souvickcse commented Jul 16, 2017

@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);
@schoenobates

This comment has been minimized.

Copy link
Owner Author

schoenobates commented Aug 6, 2017

Awesome - thanks @souvickcse

@MarinoRaul

This comment has been minimized.

Copy link

MarinoRaul commented Jan 2, 2018

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

@yugandhargangu

This comment has been minimized.

Copy link

yugandhargangu commented Jan 21, 2018

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);

@joydesigner

This comment has been minimized.

Copy link

joydesigner commented Feb 22, 2018

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

@MarinoRaul

This comment has been minimized.

Copy link

MarinoRaul commented Mar 26, 2018

Someone fix this issue in ionic 3?

Not working for me on iOS

@petreionescu

This comment has been minimized.

Copy link

petreionescu commented May 7, 2018

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

@zabaat

This comment has been minimized.

Copy link

zabaat commented Feb 11, 2019

@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

@acbfaria23

This comment has been minimized.

Copy link

acbfaria23 commented Sep 30, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.