javascript - ubicacion - Resultado de autocompletado de Google Maps en el diálogo modal de Bootstrap

google maps w3schools

Question

Tengo un campo de entrada Autocompletar de Google Maps dentro de un cuadro de diálogo modal de Twitter Bootstrap y el resultado de autocompletar no se muestra. Sin embargo, si presiono la tecla de flecha hacia abajo, selecciona el siguiente resultado de autocompletar, por lo que parece que el código de autocompletado funciona correctamente, solo que el resultado no se muestra correctamente. Tal vez está escondido detrás del diálogo modal?

Aquí están las capturas de pantalla:

Escribir algo en el campo de autocompletar no da nada

Al presionar la tecla de flecha hacia abajo se obtiene el primer resultado

Y el código:

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <div class="control-group">
        <label class="control-label" for="keyword">Cari alamat :</label>
        <div class="controls">
            <input type="text" class="span6" name="keyword" id="keyword">
        </div>
    </div>
    <div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

<script type="text/javascript">
$("#map_modal").modal({
    show: false
}).on("shown", function()
{
    var map_options = {
        center: new google.maps.LatLng(-6.21, 106.84),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-6, 106.6),
        new google.maps.LatLng(-6.3, 107)
    );

    var input = document.getElementById("keyword");
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);

    var marker = new google.maps.Marker({map: map});

    google.maps.event.addListener(autocomplete, "place_changed", function()
    {
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
        }

        marker.setPosition(place.geometry.location);
    });

    google.maps.event.addListener(map, "click", function(event)
    {
        marker.setPosition(event.latLng);
    });
});
</script>

Hice mi mejor esfuerzo para resolver esto por mi cuenta, pero como no conozco el html y css para el resultado de autocompletar (el elemento de inspección no da nada), ahora estoy perdido. ¿Alguna ayuda?

¡Gracias antes!

Answer 1

El z-index .modal de Bootstrap es por defecto 1050.

jQuery UI .ui-autocomplete z-index es por defecto 3.

Así que pon esto en el CSS:

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

¡Funciona de maravilla! :)

Answer 2

El problema es con el z-index .modal del .modal

Use este marcado de CSS :

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

También puedes consultar la demostración final here

ps: gracias a @lilina por esa demostración en jsfiddle.com

Answer 3

En general, puede subir el índice z de .pac-container a cualquier valor superior a 1050 y no necesitará las otras anulaciones de CSS.

Descubrí que este problema también existe para los cuadros de diálogo de la interfaz de usuario de jQuery. Entonces, en caso de que termine siendo útil para cualquier otra persona, aquí hay una referencia rápida de dónde viven los modales UI de Bootstrap / jQuery en el plano z:

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050

Answer 4

En mi escenario, el valor del z-index de .pac-container será init y anulará a 1000, incluso lo configuré en CSS. (posiblemente por google API?)

mi arreglo sucio

$(''#myModal'').on(''shown'', function() {
     $(".pac-container").css("z-index", $("#myModal").css("z-index"));
}

Answer 5

Esto funcionó para mí.

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

Answer 6

Si está utilizando Visual Studio, en su página style.css configure el z-index para .modal en 20.

p.ej

.modal {
    z-index: 20 !important;
}

Answer 7

Trabajó con Bootstrap 3:

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

Answer 8

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

lo hizo por mi

https://github.com/twbs/bootstrap/issues/4160