Google Place Autocomplete not showing in Bootstrap modal

Asked 20/3, 2016 at 5:25 Answered 15/5, 2023 at 19:38

FIX UPDATE: It seems that the way i was initializing the box was causing issues here is what fixed it

 <script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

UPDATE: I have updated the code to be very simple, the reason this http://jsfiddle.net/g8vxmLn9/1/ works is because its using older bootstrap and jquery so I assume because I am using newer i am having the problems.

I simply just want to show a autocomplete box in a bootstrap(3.3) model and have it show the results as you type.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">   </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <div id="my-modal" class="modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <input name="keyword" id="keyword" type="text" />
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $("#my-modal").modal({
            show: false
        }).on("shown", function () {
            var input = document.getElementById("keyword");
            var autocomplete = new google.maps.places.Autocomplete(input);

        });
        $('#my-modal').modal('show');
    });
</script>
</body>
</html>

Eyepiece answered 20/3, 2016 at 5:25 Comment(3)

id="map_canvas" is not defined in JS – Scilla 20/3, 2016 at 8:39

@Scilla I updated the code so that its simpler and has nothing to do with canvas, still doesnt work – Eyepiece 20/3, 2016 at 15:56

Thanks for the updated answer. It works well. I can confirm that. – Effeminacy 14/6 at 18:33

This fixed it

<script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

Eyepiece answered 20/3, 2016 at 16:16 Comment(2)

Explanation: .pac-container is the wrapping div element of the Google Autocomplete result. In this case modal already has a high z-index. So you have to set higher z-index than the modal – Killen 27/12, 2017 at 4:49

Just add

.pac-container {
    z-index: 10000 !important;
}

Doggish answered 2/9, 2018 at 20:2 Comment(0)

If you are still looking.

                    var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index', '9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    });

Statued answered 10/2, 2017 at 14:42 Comment(0)

For use with Angular 2+, make sure to use ng-deep

  ::ng-deep .pac-container
  {
    z-index: 99999 !important;
  }

Whereof answered 15/5, 2021 at 0:18 Comment(0)

Depending on the z-index of your modal, your .pac-container will need to be at least 1 higher.

Your stylesheet should include

.pac-container {z-index: 99999999999 !important;}

Oversize answered 17/10, 2022 at 12:26 Comment(0)

Replace inicialize function on load windows or, document ready, etc. Solution: into box address input add onclick="initialize()". It´s fine!

Spurlock answered 15/5, 2023 at 19:38 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Brownie 16/5, 2023 at 0:22

Recommended topics

Hot tags