Thanks a lot Gautam for figuring this out, I too had the same issue. Thanks
a ton for posting the solution and for saving so much of my time.
On Friday, January 27, 2012 at 2:30:22 PM UTC+5:30, Gautam Tandon wrote:
>
> 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 <gt.2...@gmail.com> 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 unsubscribe from this group and stop receiving emails from it, send an email
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.
