How to! google maps places/autocomplete long press issue in Ionic - the fix!

@rolinger wrote:

This issue plagued me for quite sometime. A year ago I integrated google maps with autocomplete into my Ionic app and from the get go I was experiencing the long press issue. Essentially, when contextual suggestions were appearing in the input window the user would select on the name/address to autocomplete the address field - but nothing would happen.

The user would actually have to do a long press on the option in order for that one to be selected. I dealt with it so long that I just got used to it. However, it is NOT an intuitive thing for users to do - they simply think its broken because their single tap isn't selecting the address.

I came across this fix today and wanted to repost and share it...apparently it is Ionic specific issue:

I use an external global function to bind the google places/autocomplete to my maps start/dropoff input fields. So in my maps controller I have:

  autoComplete('map_pickupInput',1) ;
  autoComplete('map_dropoffInput',2) ;

However, you bind googles autocomplete, you will then need this in your maps controller:

  $scope.disableTap = function(id) {
    var container = document.getElementsByClassName('pac-container');
    angular.element(container).attr('data-tap-disabled', 'true');
    var backdrop = document.getElementsByClassName('backdrop');
    angular.element(backdrop).attr('data-tap-disabled', 'true');
    angular.element(container).on("click", function() {
        document.getElementById(id).blur();
    })

And in your maps HTML:

Pickup:  <input type="text" id="map_pickupInput" ng-model="search1" data-tap-disabled="true" ng-change="disableTap('map_pickupInput');"></input>
Drop Off: <input type="text" id="map_dropoffInput" ng-model="search2" data-tap-disabled="true" ng-change="disableTap('map_dropoffInput');"></input>

And here is my global function that binds google's autocomplete to the maps input fields (my input fields are outside of the map itself:

function autoComplete(inputID,type) {
  //inputID = text input ID
  // type = start vs end point
  var input = /** @type {HTMLInputElement} */(
      document.getElementById(inputID));

  var options = {
    types: ['address'],
  };

  var autocomplete = new google.maps.places.Autocomplete(input);  // add options here if necessary

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var newAddy, newName ;
    var place = autocomplete.getPlace();
    if (place.name) {
      newAddy = place.formatted_address ;
      newName = place.name ;
    } else if (place.formatted_address) {
      newAddy = place.formatted_address ;
      newName = place.name ;
    } else if (!place.geometry) {
      // do something with error
    }
  });
}

Kudos and props to Abhay Kumar for originally posting how to do this: http://www.qed42.com/blog/ionic-google-places-api

Posts: 1

Participants: 1

Read full topic