javascript - Google Maps Autocomplete Result in Bootstrap Modal Dialog - Stack Overflow

admin管理员组

文章数量:1134055

I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, it selects the next autocomplete result, so it seems that the autocomplete code works correctly, only that the result is not displayed correctly. Maybe it's hidden behind the modal dialog?

Here's the screenshots :

Typing something in the autocomplete field gives nothing

Pressing the arrow down key gives the first result

And the code :

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

I've tried my best to solve this on my own, but since I don't know the html&css for the autocomplete result (inspect element gives nothing), I'm in a lost now. Any helps?

Thanks before!

I have a Google Maps Autocomplete input field inside a Twitter Bootstrap modal dialog and the autocomplete result is not displayed. However, if I press the down arrow key, it selects the next autocomplete result, so it seems that the autocomplete code works correctly, only that the result is not displayed correctly. Maybe it's hidden behind the modal dialog?

Here's the screenshots :

Typing something in the autocomplete field gives nothing

Pressing the arrow down key gives the first result

And the code :

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

I've tried my best to solve this on my own, but since I don't know the html&css for the autocomplete result (inspect element gives nothing), I'm in a lost now. Any helps?

Thanks before!

• javascript
• html
• css
• google-maps-api-3
• twitter-bootstrap

Share Improve this question Follow asked Jun 9, 2012 at 1:54 FurunomoeFurunomoe 1,40422 gold badges1717 silver badges2727 bronze badges 1

• 2 I made some progress, but hit a wall. I'll explain what I discovered to try to help others hopefully solve your question. I re-arranged the text box and it looks like the autocomplete is not only behind the modal, but behind the gray-out area too (check this demo) jsfiddle.net/Y4WgX/embedded/result Changing the z-index was ineffective. I also learned the suggestions are in a div with class called pac-container, so I changed its color to green to demonstrate. – Tina CG Hoehr Commented Jun 9, 2012 at 2:55

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 140

The problem is with the z-index of the .modal

Use this CSS markup:

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

Also you can check the final demo here

ps: thanks to @lilina for that demo on jsfiddle.com

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

did it for me

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

*Bootstrap 5.3:

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

Bootstrap's .modal z-index is by default 1050.

jQuery UI's .ui-autocomplete z-index is by default 3.

So put this on the 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;
}

Works wonders! :)

Worked with Bootstrap 3:

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

In my scenario the .pac-container 's z-index value will be init and override to 1000, even I set in CSS. (possibly by google API?)

my dirty fix

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

I have spend 2,3 hours to just digging out the error with google places API drop down z index. Finally I have found this. Just paste this code at top of your JS script and update the input id name.

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

Full reference link. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M Thanks to Gautam.

In general, you can just bump up the .pac-container z-index to anything above 1050 and you won't need the other CSS overrides.

I discovered that this problem also exists for jQuery UI dialogs. So in case it ends up being helpful to anyone else, here's a quick reference for where the Bootstrap/jQuery UI modals live in the z-plane:

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

Bootstrap 5:

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

This worked for me.

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

Find z-index of your page or dialog then add below css property:

.pac-container { z-index: [greater than your z-index] !important; }

this will solve the problem.

If you are using Visual Studio, on your style.css page set the z-index for .modal to 20.

e.g

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

For angular project, If you're opening map inside the mat dialog, don't forget to put this in css/scss file.

::ng-deep {
   .pac-container {
       z-index: 10000 !important;
    }
}

本文标签： javascriptGoogle Maps Autocomplete Result in Bootstrap Modal DialogStack Overflow