Really appreciate your post and solution.
On Friday, 27 January 2012 04:00:22 UTC-5, 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 <[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
"[deprecated] Google Maps JavaScript API v3. Please use the latest post." group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.
