Google places not working in ionic modal window

ionic-v1
1

hi gurus,

i am trying to use google places in ionic modal but not able to select the place.
see my plunker:

the main screen it’s working fine. i could able to search and select a location.
but when you open modal window by clicking the “Google Place” button, i am not able to select the address in the modal window. i am not getting the lat and long in modal window.

any help would be greatly appreciated.

regards,

3

i am also facing same problem any help would be greatly appretiated.

4

add
data-tap-disabled=“true” in your html page

5

nope its still not working

6

This is working code of ionic google places but doesn’t work on modal.

7 
		.pac-container {
		z-index: 3000 !important;
		}
		.modal-open {
			pointer-events: auto !important;
		}

Try adding this style in ur CSS or in head tag of your page , it worked for me …

4 Likes
8

@Neethu its working but have a small issue that we have to tap 2nd time somewhere on the screen in-order to view the bind data.
Otherwise its working normally.
Thanks…:+1:

9

It’s not working. Did anybody here could solve it ?

10

@Neethu solution works for me. thanks.

11

I could solve that.
Check it out:

jQuery("#my-autocomplete-element-id").focus(function(event){
    $timeout(function(){
        jQuery(".pac-container").css("z-index", 10000);
        jQuery('.pac-container').css('pointer-events', "auto");
        jQuery('.pac-container').attr('data-tap-disabled', true);
        if (isMobilePlatform()) {
	    jQuery('.pac-container').mouseover(function(){
	        var focusedElement = jQuery(':focus');
		focusedElement.blur();
	    });
	}
    },500);
});

P.S.: You’ll have to implement isMobilePlatform method.

12

Thanks, brother, success awesome

14

Got this working using this fix, but we don’t like using jQuery in our AngularJS applications so I changed it a bit to be within the AngularJS API with a bit of native JavaScript.

Markup

<input placeholder="Search for places" 
       ng-model="locationCtrl.event.location"
       on-place-changed="locationCtrl.placeChanged()"
       places-auto-complete
       ng-focus="locationCtrl.disableTap($event)">

Controller

vm.disableTap = function(event) {

    var input = event.target;
    
    // Get the predictions element
    var container = document.getElementsByClassName('pac-container');
    container = angular.element(container);

    // Apply css to ensure the container overlays the other elements, and
    // events occur on the element not behind it
    container.css('z-index', '5000');
    container.css('pointer-events', 'auto');

    // Disable ionic data tap
    container.attr('data-tap-disabled', 'true');

    // Leave the input field if a prediction is chosen
    container.on('click', function(){
        input.blur();
    });
};
16

@Neethu I seriously need to gift you a beer!

This has been bothering me for weeks and the only solutions I could find only mentioned the z-index on the pac-container!!!

thank you!

17

:slight_smile: Happy to hear that it worked …