0

I am now trying to add a Google Map Places Search Box on to my webpage. I'd like to add it on to a Bootstrap modals. I have successfully add the Box; however, the search result is hidden under the modal, as the picture shown below. I don't know how to fix this. Could anyone please give me some suggestion? Thanks.

enter image description here

Here is how I add the search box using 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 search box https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=zh-Tw

user4029119
  • 145
  • 1
  • 4
  • 10
  • I would suggest pasting a JSFiddle link for others to help you test. – Koh Feb 28 '15 at 19:24
  • You'll have to change the z-index property of search results. Can you please paste your complete to JSFiddle so that I can show you that. – Suyash Dixit Mar 01 '15 at 07:14
  • Thanks for your help! I found the problem and fixed that. The modal has default z-index of 1040 and pac-container, the list of search result, has default z-index of 1000. Changing pac-container's z-index to 1050 would work! – user4029119 Mar 02 '15 at 08:43

1 Answers1

0

Add this style in your css

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

original response: here

Community
  • 1
  • 1
Yrving Heysen Molina Yriarte
  • 33
  • 7