如何在Bootstrap模式上放置Google Map Places搜索框

Question

我现在正在尝试将Google地图位置搜索框添加到我的网页上。我想将它添加到Bootstrap模态中。我已成功添加Box;但是，搜索结果隐藏在模态下，如下图所示。我不知道如何解决这个问题。有人可以给我一些建议吗？感谢。

以下是我使用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';
}

自举 http://getbootstrap.com/javascript/#modals

放置搜索框 https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=zh-Tw

Answer 1

在css中添加此样式

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

原始回复：here