Google Maps Autocomplete Result in Bootstrap Modal Dialog

Question

I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, i

Answer 1

This worked for me.

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

Answer 2

The problem is with the z-index of the .modal

Use this CSS markup:

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

Also you can check the final demo here

ps: thanks to @lilina for that demo on jsfiddle.com

Answer 3

Worked with Bootstrap 3:

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