Google Maps AutoFill Result in Bootstrap Modal Dialog Box

Question

I have an Autocomplete input field in Google Maps in the Twitter Bootstrap mosaic dialog box, 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 is working correctly, only the result is displayed incorrectly. Maybe it is hidden behind a modal dialogue?

Here are the screenshots:

Entering something in the autocomplete field gives nothing

Pressing the down arrow 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 tried my best to solve it myself, but since I don’t know html & css for the autocomplete result (the validation element doesn’t give anything), I’m lost now. Any help?

Thanks before!

Answer 1

The problem is z-index .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; }​ 

You can also check the final demo here.

ps: thanks @lilina for this demo on jsfiddle.com

Answer 2

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

did it for me

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

Answer 3

Bootstrap .modal z-index by default is 1050.

jQuery UI .ui-autocomplete z-index default 3.

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

It does wonders! :)

Answer 4

Work with Bootstrap 3:

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

Answer 5

In general, you can simply raise z-index.pac-container to something above 1050, and you won't need other CSS overrides.

I found that this problem also exists for jQuery UI dialogs. Thus, in case it turns out to be useful for anyone else, here is a short link to where the Bootstrap / jQuery UI mods live in the z plane:

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

Answer 6

In my script, the value of z-index.pac-container will be initialized and overridden to 1000, even if I'm set to CSS. (maybe using the Google API?)

my dirty fix

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

Answer 7

It worked for me.

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

Answer 8

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

eg

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

Answer 9

I spent 2.3 hours just popping up the error using the Google Places API z index drop-down list. Finally I found this. Just paste this code at the beginning 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 link. https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1M Thanks Gautam.