I found the answer; and posting it here just in case anyone else faces
the same issue in future...
Here's all you need to do:
Attach a change/keytype listener on your input field and set the z-
index then. Make sure not to call it unnecessarily though...
something like this::
var pacContainerInitialized = false;
$('#inputField').keypress(function() {
if (!pacContainerInitialized) {
$('.pac-container').css('z-index',
'9999');
pacContainerInitialized = true;
}
});
It looks like (after debugging using firebug...) that google creates
the auto complete drop down on the fly using the class "pac-
container". It uses a default z-index of 1000, which is less than what
jquery modal dialog uses and hence the problem!
Some posts say that by simply adding a style in your html will fix the
problem but that didn't work for me! Probably because it's getting
over written by google's code when the pac-container combo box is
actually created; am not sure... but the above method worked for me...
Thanks!
GT
On Jan 24, 11:20 pm, Gautam Tandon <[email protected]> wrote:
> Folks, I have spent hours trying to figure this out with no luck at all! Am
> hoping to get some answer on this forum...
>
> Here's my problem:
> I have a JQuery modal dialog that has a google places map object along with
> an autocomplete input text field.
>
> First off, the map didn't load completely, so I had to bind the modal
> dialog's "dialogopen" event (which I believe is OK... please let me know if
> you think that's not a good idea).
>
> Second, and more importantly >> When I type in the text box, the *auto
> complete combo box shows behind the dialog*! ... I have tried all sorts of
> things such as setting z-index of the input text field, setting z-index on
> .pac-container, decreasing z-index of the modal dialog box, etc.. but
> nothing seems to work.
>
> PLEASE HELP!
>
> Here's the html code (please use your google APIs key to test it out!
> thanks!):
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
> <script src="js/jquery-1.6.2.min.js" ></script>
> <script src="js/jquery-ui-1.8.16.custom.min.js" ></script>
> <script src="http://maps.googleapis.com/maps/api/js?key=[USE YOUR KEY
> PLEASE]&sensor=false"></script>
> <script
> src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false";></script>
> <link rel="stylesheet" type="text/css"
> href="css/redmond/jquery-ui-1.8.16.custom.css" />
> <style>
> body, table { font-size: 12px }
> </style>
> </head>
> <body>
>
> <div id="test_dialog" title="test">
> <input size="15" type="text" name="geoRadCity" id="geoRadCity" value=""
> />
> <br/><br/>
> <div id="map_canvas" style="width:300px; height:250px"></div>
> </div>
> <script>
> $(function() {
> $("#test_dialog").dialog({
> modal: true,
> resizable: false,
> height: 550,
> width: 800
> });
> });
>
> var map;
> var circle = null;
> function initMapCanvas() {
> var mapOptions = {
> center: new google.maps.LatLng(37.7749295, -122.41941550000001),
> zoom: 5,
>
> panControl: false,
> zoomControl: false,
> mapTypeControl: false,
> scaleControl: false,
> streetViewControl: false,
> overviewMapControl: false,
> draggable: false,
> disableDoubleClickZoom: true,
>
> mapTypeId: google.maps.MapTypeId.ROADMAP
> };
> return new google.maps.Map(document.getElementById("map_canvas"),
> mapOptions);
> }
> $('#test_dialog').bind('dialogopen', function(event, ui) {
> if (map == null) {
> map = initMapCanvas();
> }
> });
>
> var input = document.getElementById('geoRadCity');
> var options = {
> types: ['geocode']
> };
> var autocomplete = new google.maps.places.Autocomplete(input, options);
> </script>
>
> </body>
>
> Thanks!
> GT
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
