El autocompletado de Google Maps no funciona dentro de la ventana emergente modal
Solución 1:
Para solucionar el problema por el cual los resultados de autocompletar sugeridos están ocultos en una ventana modal con un valor de índice z más alto, puede resolverlo incorporando el CSS proporcionado en su hoja de estilo.
<code>div.pac-container {z-index: 99999999999 !important;
}
</code>
Solucion 2
Para versiones de Angular 4 y superiores.
<code>::ng-deep .modal { z-index: 1001 !important;}
::ng-deep .modal-backdrop {z-index: 1000 !important;}
::ng-deep .pac-container {z-index: 1055 !important;}
</code>
Solucion 3
Para versiones de Angular 4 y superiores.
<code>::ng-deep .modal { z-index: 1001 !important;}
::ng-deep .modal-backdrop {z-index: 1000 !important;}
::ng-deep .pac-container {z-index: 1055 !important;}
</code>
Solucion 3
Resultado de autocompletar de Google Maps en el cuadro de diálogo modal Bootstrap
El problema radica en lo z-index asociado con el .modal .
Emplee este código CSS para marcar:
<pre><code>.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
}
.modal{
z-index: 20;
}
.modal-backdrop{
z-index: 10;
}
</code></pre>