Google places not working in ionic modal window

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.


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

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

nope its still not working

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

		.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 …


@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.

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

@Neethu solution works for me. thanks.

I could solve that.
Check it out:

        jQuery(".pac-container").css("z-index", 10000);
        jQuery('.pac-container').css('pointer-events', "auto");
        jQuery('.pac-container').attr('data-tap-disabled', true);
        if (isMobilePlatform()) {
	        var focusedElement = jQuery(':focus');

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

Thanks, brother, success awesome

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.


<input placeholder="Search for places" 


vm.disableTap = function(event) {

    var input =;
    // 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(){

@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!

:slight_smile: Happy to hear that it worked …