Cannot select from Google places autocomplete

Question

I am developing an ionic app to be run on Android. On a particular screen, I have a google maps and a search box. I have used the phone gap plugin for the google maps to get the native map instead of using Google Maps Javascript API as it is too slow.

The search box is autocomplete to get places from google using the following code -

input = document.getElementById 'search-input'
autocomplete = new google.maps.places.Autocomplete(input)

This turns the input field with autocomplete for places from google. The problem is that I am not able to select any of the options from the autocomplete dropdown.

My HTML code -

<ion-content scroll="false">

   <div id="searchBox">
     <input id="search-input">
   </div>
   <div id="map-canvas">

</ion-content>

The map-canvas holds the map. I tried adding ng-focus="disableTap()" to input search-input.

disableTap = ->
   container = document.getElementsByClassName 'pac-container'
   angular.element(container).attr 'data-tap-disabled', 'true'
   angular.element(container).on 'click', ->
        document.getElementById('search-input').blur()

I found this solutions at this link

But this does not work. Any inputs here? I'm at my wits end here.

Answer 1

The below worked for me. From user @TillaTheHun0 :

.controller('MyCtrl', function($scope) {
  $scope.disableTap = function(){
    container = document.getElementsByClassName('pac-container');
    // disable ionic data tab
    angular.element(container).attr('data-tap-disabled', 'true');
    // leave input field if google-address-entry is selected
    angular.element(container).on("click", function(){
        document.getElementById('searchBar').blur();
    });
  };
})

Answer 2

Okay i found the solution, this will make you able to select on mobile add this after creating your map

    $$('body').on('touchstart','.pac-container', function(e){
        e.stopImmediatePropagation();
    })

i will also post my full code in case you're confused :

    var myLatLng = {lat: 36.5802466, lng: 127.95776367};
    document.getElementById('qkp-lat').value = myLatLng.lat;
    document.getElementById('qkp-lng').value = myLatLng.lng;
    window.postmap = new google.maps.Map(document.getElementById('postmap'), {
        center: myLatLng,
        zoom: 6,    
        mapTypeControl: false,
        streetViewControl: false,
        disableDefaultUI: true,
        mapTypeId: 'roadmap'
    });

    // GOOGLE MAP RESPONSIVENESS
    google.maps.event.addDomListener(window, "resize", function() {
     var center = postmap.getCenter();
     google.maps.event.trigger(postmap, "resize");
     postmap.setCenter(center); 
    });

    //MARKER
    window.PostAdMarker = new google.maps.Marker({
      map: postmap,
      position:myLatLng,
      draggable: true,
      anchorPoint: new google.maps.Point(0, -29)
    });
    //LOAD FROM CURRENT CITY
    var geocoder = new google.maps.Geocoder();
    //AFTER DRAG AND DROP SHOWS THE LAT AND LONG
    google.maps.event.addListener(PostAdMarker, 'dragend', function (event) {
        var latlng = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[1]) {
                // saving to dom
                document.getElementById('qkp-lat').value = latlng.lat;
                document.getElementById('qkp-lng').value = latlng.lng;
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
    });

    var getlocDiv = document.createElement('div');
    var getlocvar = new getloc(getlocDiv, postmap);  
    getlocDiv.index = 1;
    postmap.controls[google.maps.ControlPosition.TOP_RIGHT].push(getlocDiv);



    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    postmap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    postmap.addListener('bounds_changed', function() {
      searchBox.setBounds(postmap.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: postmap,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      postmap.fitBounds(bounds);
    });
    $$('body').on('touchstart','.pac-container', function(e){
        e.stopImmediatePropagation();
    })