Google Maps Address autocomplete inside slide box

ionic-v1
21

+1 on this, need it aswell…

22

Just wanted to share some info on this. Apparently, after the suggestion box pops up, if you click on any item for more than around 3 seconds, it works just fine. I’ve tested it for 4 different devices, for which the regular (instantaneous) clicking did not work. Obviously you cant ask the user to click on a suggestion for 3/4 seconds, so thats not a solution per say but I hope someone can find a better solution from this observation.

23

hi mate, could you please suggest some codepen about the details of your workflow? thanks.

24

I think this issue might get obsolete as there is another post talking about some other solution

2 Likes
25

I am getting this error when typing in the input field:

Cannot read property 'getPlacePredictions' of undefined
26

Before building my ionic app, I had the same exactly the same issue: conflict with FastClick.
The solution was to add this block:

$(document).on({
    'DOMNodeInserted': function () {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

But does not work using Ionic since Ionic does not use FastClick I think.
Does anyone found a solution?

1 Like
27

I can confirm that https://github.com/kuhnza/angular-google-places-autocomplete/ worked for me on an ionic project. I haven’t tested much but seems it passed initial testing.

1 Like
28

Have you all used this Google maps directive? Now I’m having the same tap issue but I can’t get the directive to work as I want.

I want to capture in the controller the destination details and be able to fire an event when the user has searched, but I don’t know how so at the end, I’ve implemented the vanilla Google maps autocomplete directly into my controller without directives. Which unfortunately, brings me to the tap issue.

29

Looks like i’ve found a working solution here:

30

@Bonda your proposed solution on GitHub does not work, for me at least.
the problem is that directive does not add a class to googles places div when you navigate to the view. However if you relode the page it works because now the directive just got compiled (refresh of the page) and now it finds pac-container div.

Is there a way to tell the directive to watch for this pac-container div?

Thanks

31

For anyone who comes across this in the future like I did, this was a great solution that worked out for me https://github.com/kuhnza/angular-google-places-autocomplete

32

It works for me too! Thanks!

33 
$timeout(function(){
	var predictionContainer = angular.element(document.getElementsByClassName('pac-container'));
	predictionContainer.attr('data-tap-disabled', true);
	predictionContainer.css('pointer-events', 'auto');
	predictionContainer.bind('click', function(){
		element.find('input')[0].blur();
	});
}, 100);

Thats how i fix it im using both Marker and Autocomplete

2 Likes
34

Based on rangeles solution, this it what i got working for me:

 angular.module('app')
.directive('googleplace', function($timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, model) {
            var options = {
                types: [],
                componentRestrictions: {}
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
 
            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                console.log('place changed');
                scope.$apply(function() {
                    model.$setViewValue(element.val());                
                });
            });


            $timeout(function(){
                var predictionContainer = angular.element(document.getElementsByClassName('pac-container'));
                predictionContainer.attr('data-tap-disabled', true);
                predictionContainer.css('pointer-events', 'auto');
                predictionContainer.bind('click', function(arg){                    
                    element[0].blur();
                });  
                console.log('timout', predictionContainer)              
            }, 500);

        }
    };
});

Use the directive in a template by adding a googleplace attribute

      <label class="item item-input item-text-wrap">
    <span class='input-label'>Address or city</span>
     <input type="text" placeholder="Address or city" ng-model="search_data.address" googleplace="" class="ng-pristine ng-valid " autocomplete="off">
  </label>

This directive is based on Victor Bjerkhom’s directive https://gist.github.com/VictorBjelkholm/6687484

1 Like
35

@bappy004 Give ion-google-place a try, its one of the most refined plugin and is supported by the community. https://github.com/israelidanny/ion-google-place

36

only thing you should know when you use kuhnza’s code below is,
you can’t set id for the input element. otherwise works great!

37

Hey, guys!

Looks like a found a solution: http://devfanatic.com/blog/blog/2015/11/03/google-places-autocomplete-with-ionic-framework/
This works on the top of google places API (predictions list) and shows great results on iOS and Android for me.

2 Likes
39

Hello,
I also faced same issue. I tried this and work for me. Below is the solution:
Add ‘data-tap-disabled’ attribute as true to ‘.pac-container’.

google.maps.event.addListenerOnce($scope.map, ‘idle’, function(){
$(".pac-container").attr(‘data-tap-disabled’,‘true’);
});

-Thanks,
Pradnya

40

This work for me no tap and hold just press over the pac_item like as click

41

I have tried many things and only this one worked.Thanks