Skip to content

Instantly share code, notes, and snippets.

@schoenobates
Created November 16, 2014 22:51
Show Gist options
  • Save schoenobates/ef578a02ac8ab6726487 to your computer and use it in GitHub Desktop.
Save schoenobates/ef578a02ac8ab6726487 to your computer and use it in GitHub Desktop.
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);
}
@zabaat
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
Copy link

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

@CodeWithOz
Copy link

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 !

@fred2458
Copy link

Works perfect! Thanks man!! I fking love you

@RomanCzujko
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment