Thanks a lot Gautam...save me quite the trouble !! I was dreading debugging this !
On Wednesday, January 25, 2012 12:50:21 PM UTC+5:30, Gautam Tandon 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 view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/XbziuH-JjukJ. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
