Как поместить окно поиска Google Map Places в модальные окна Bootstrap

Сейчас я пытаюсь добавить окно поиска Google Map Places на свою веб-страницу. Я хотел бы добавить его в модальные окна Bootstrap. Я успешно добавил коробку; однако результат поиска скрыт под модальным окном, как показано на рисунке ниже. Я не знаю, как это исправить. Может ли кто-нибудь дать мне какое-нибудь предложение? Спасибо.

введите здесь описание изображения

Вот как я добавляю окно поиска с помощью javaScript:

function searchBoxInit(){
        var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
        //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var searchBox = new google.maps.places.SearchBox(/** @type {HTMLInputElement} */(input));
        google.maps.event.addListener(searchBox, 'places_changed', function() {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
                return;
            }
            place = places[0];
            newpName = place.name;
            newpLat = place.geometry.location.lat();
            newpLong = place.geometry.location.lng();
        });     
    }

function displaySearchEngine(){
        var objElement = document.getElementById('pac-input');
        searchBoxInit();
        objElement.style.display = 'block';
        objElement.style.visibility = 'visible';
}

Bootstrap http://getbootstrap.com/javascript/#modals

Поле поиска Places https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=zh-Tw


google-maps-api-3 bootstrap-modal
person user4029119    schedule 28.02.2015    source источник
comment
Я бы предложил вставить ссылку JSFiddle для других, чтобы помочь вам протестировать.   -  person Koh    schedule 28.02.2015
comment
Вам придется изменить свойство z-index результатов поиска. Не могли бы вы вставить свой полный файл в JSFiddle, чтобы я мог показать вам это.   -  person Suyash Dixit    schedule 01.03.2015
comment
Спасибо за вашу помощь! Я нашел проблему и исправил ее. Модальное окно имеет z-индекс по умолчанию 1040, а pac-контейнер, список результатов поиска, имеет z-индекс по умолчанию 1000. Изменение z-индекса pac-контейнера на 1050 будет работать!   -  person user4029119    schedule 02.03.2015

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте этот стиль в свой css

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

исходный ответ: здесь

person Yrving Heysen Molina Yriarte    schedule 16.06.2015