Google Maps Autocomplete Result in Bootstrap Modal Dialog

Question

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 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) http://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, Jun 09 '12 at 02:55

score 132 · Accepted Answer · answered Jun 09 '12 at 05:15

132

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

answered Jun 09 '12 at 05:15

Luis

5,786
8
43
62

Why is all this necessary? I know it is, but why? Also this puts the modal up to far for me and the bootstrap static nav-bar is now over it. Alternatives? – Marc M. Apr 09 '14 at 07:27
@MarcM. What version of bootstrap are you using? I think it would be better if you open up a new question with full details of your problem. – Luis Apr 09 '14 at 12:12
9

I found that this put my modal behind my nav bar, it didn't look right. Try changing the z index of the .pac-container to 1050 – Jeff Finn Sep 11 '14 at 21:10
@JeffFinn Ok you can open a new question and I can try to help you, you have to check that this is bootstrap 2, are you using the same version? If that's the case I don't see the reason of downvoting the answer, as you can see it has helped a few people. – Luis Sep 12 '14 at 23:17
I have it working. That's what I was trying to say. I set .pac-container to 1050 like what is said in one of the answers below. Thanks for the offer tho – Jeff Finn Sep 13 '14 at 15:58
4

.pac-container { z-index: 1070; } is only thing you need. If you have .navbars in your page they have a different z-Index instead of changing all your bootstrap z-index might as well just do the z-index on GMaps. This problem also occurs with GeoComplete.js – user706001 Feb 07 '15 at 16:03
@Luis Thanks a lot. It is very helpful to me – Nikhil sHETH Mar 03 '17 at 13:54

score 74 · Answer 2 · answered Oct 05 '14 at 16:20

74

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

did it for me

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

answered Oct 05 '14 at 16:20

Vyacheslav Shevchenko

741
5
3

1

Works! You may need to increase the z-index value depending on your css. – eyal_katz Dec 16 '16 at 04:57
This works to me on primefaces, I had the map like this:
And this answerd fix the bug. – Ramiro Arizpe Giacomelli Dec 20 '17 at 20:37
1

I needed to change it to 9999, but it works. (Bootstrap 4) – charlie Oct 31 '18 at 10:38
In case you're wondering like I was, the `.pac-container` is the container for the Places AutoComplete, as opposed to anything related to bootstrap. My modal isn't from Twitter Bootstrap so I was having trouble understanding which CSS really matters (other answers have multiple CSS parts). – Tyler Collier Aug 06 '20 at 20:06
Works perfect, modal and backdrop still over the header and side menu, thanks – Louwki Jan 06 '21 at 08:29
I changed mine to 1055, and that seems to have fixed it for Bootstrap 5. – Nick Albrecht Aug 17 '22 at 20:09
boostrap 5.1, had to go higher (z-index: 99999999 !important;) – sobelito Nov 10 '22 at 14:38

score 16 · Answer 3 · answered Oct 08 '12 at 09:24

16

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! :)

answered Oct 08 '12 at 09:24

Rudi Wijaya

872
1
10
25

If this doesn't work for you it might be because .ui-autocomplete doesn't exist. Instead combine it with the accepted answer and do a .pac-container { z-index: 1051; } which is a lot cleaner than the expected answer and affects much less of your other code – Pompey Sep 14 '14 at 04:22

score 13 · Answer 4 · answered Sep 04 '13 at 19:03

13

Worked with Bootstrap 3:

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

answered Sep 04 '13 at 19:03

Pedro Casado

1,705
1
21
43

Thanks for the answer and I also changed it to 1050 – Harsha Apr 30 '15 at 13:42

score 6 · Answer 5 · answered Mar 31 '13 at 10:58

6

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"));
}

answered Mar 31 '13 at 10:58

vincentlcy

1,157
2
17
19

This helps, although in newer Bootstrap, the event is 'shown.bs.modal'. – Arunas Jan 24 '16 at 20:51

score 6 · Answer 6 · edited Jul 26 '19 at 18:46

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.

score 4 · Answer 7 · answered Aug 21 '12 at 08:56

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

score 2 · Answer 8 · answered Feb 10 '17 at 14:38

This worked for me.

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

score 0 · Answer 9 · edited Mar 09 '16 at 10:19

0

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

edited Mar 09 '16 at 10:19

Finrod

2,425
4
28
38

answered Mar 09 '16 at 09:20

Jabulani Vilakazi

67
1
2

score 0 · Answer 10 · answered Mar 15 '23 at 03:57

0

Bootstrap 5:

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

answered Mar 15 '23 at 03:57

Harpal

1,729
17
18

Google Maps Autocomplete Result in Bootstrap Modal Dialog

10 Answers10

Linked