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

ionic-v1
1

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: Google Places Api integration with IONIC and the Long Press Issue

1 Like
2

One fix to the above HTML code - this is specific to iOS.

Remove: data-tap-disabled="true" from the HTML code, its not needed. But in iOS, leaving it in WILL prevent your mouse focus from getting into the text field, and thus without mouse focus in the input field, the keyboard (hardware or virtual) won’t open or work.

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>

To:

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