Результат автозаполнения Карт Google в модальном диалоговом окне Bootstrap

У меня есть поле ввода Autocomplete в Google Maps в мозаичном диалоговом окне Bootstrap Twitter, и результат автозаполнения не отображается. Однако, если я нажимаю клавишу со стрелкой вниз, он выбирает следующий результат автозаполнения, поэтому кажется, что код автозаполнения работает правильно, только результат отображается неправильно. Может быть, он скрыт за модальным диалогом?

Вот скриншоты:

Typing something in the autocomplete field gives nothing Ввод чего-то в поле автозаполнения ничего не дает

Pressing the arrow down key gives the first result Нажатие клавиши со стрелкой вниз дает первый результат

И код:

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

Я попытался изо всех сил решить это самостоятельно, но так как я не знаю html & css для результата автозаполнения (элемент проверки ничего не дает), я сейчас потерялся. Любая помощь?

Спасибо прежде!

Ответы

Ответ 1

Проблема заключается в z-index .modal

Используйте эту 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;        
}​

Также вы можете проверить окончательное демо здесь

ps: благодаря @lilina для этой демонстрации на jsfiddle.com

Ответ 3

Bootstrap .modal z-index по умолчанию - 1050.

jQuery UI .ui-autocomplete z-index по умолчанию 3.

Итак, поставьте это на CSS:

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

Делает чудеса!:)

Ответ 4

Работа с Bootstrap 3:

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

Ответ 5

В общем, вы можете просто поднять z-index.pac-container на что-нибудь выше 1050, и вам не понадобятся другие переопределения CSS.

Я обнаружил, что эта проблема также существует для диалогов jQuery UI. Таким образом, в случае, если он окажется полезным для кого-либо еще, вот краткая ссылка на то, где мода-модули Bootstrap/jQuery UI живут в плоскости z:

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

Ответ 6

В моем сценарии значение z-index.pac-container будет инициализировано и переопределено до 1000, даже если я установлен в CSS. (возможно, с помощью API Google?)

мое грязное исправление

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

Ответ 7

Это сработало для меня.

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

Ответ 8

Если вы используете Visual Studio, на странице style.css установите z-index для .modal на 20.

например

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

Ответ 9

Я потратил 2,3 часа на то, чтобы просто вытащить ошибку с помощью Google Места API раскрывающегося списка z index. Наконец я нашел это. Просто вставьте этот код в начало вашего JS-скрипта и обновите имя идентификатора ввода.

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

Полная ссылка. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M Спасибо Гаутам.