places.Autocomplete hides behind JQuery Dialog

Gautam Tandon

unread,

Jan 25, 2012, 2:20:21 AM1/25/12

to google-map...@googlegroups.com

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

Gautam Tandon

unread,

Jan 27, 2012, 4:00:22 AM1/27/12

to Google Maps JavaScript API v3

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

ANCHAL SACHDEVA

unread,

Nov 1, 2015, 4:44:37 PM11/1/15

to Google Maps JavaScript API v3

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.

Iman Hosseini

unread,

Dec 24, 2018, 12:51:27 AM12/24/18

to [deprecated] Google Maps JavaScript API v3. Please use the latest post.

Really appreciate your post and solution.

Reply all

Reply to author

Forward