Google Places Autocomplete not showing up

Question

I've been working on this for hours trying to figure out why the supposedly simple autocomplete wasn't showing up.

It turns out that in my code, the input element is being set to autocompete="off", and the style on the pac-container is display: none.

I can change these values in DevTools, and it works fine, but I can't figure out how or why these are being set to these values.

My autocomplete is set-up in an Angular Directive, like this, where loadGmaps gets the google api.

template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
link: function($scope, elm, attrs){
    loadGmaps().then(function(){

    var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
    console.log(autocomplete);
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        $scope.position = {
            lat: place.geometry.location.lat(),
            lon:  place.geometry.location.lng()
        };
        $scope.$apply();
    });
});

---------------------Update----------------------------------------------

Hopefully nobody else is lead astray by this, the autocomplete="off" is a bit misleading. Even with autocomplete="off", the autocomplete still works, so that wasn't the problem. I am over-writing the css of the .pac-container element, which holds the results with

.pac-container {  //this is a fix for google autocomplete not showing up
    z-index: 10000 !important;
    display: block !important;
}

The problem with this is that once an item has been selected from the autocomplete, the autocomplete remains visible, I'm pretty sure there is a better way to be using autocomplete.

score 62 · Accepted Answer · answered Nov 25 '13 at 21:47

62

For anybody else who may be stuck or having difficulty with this, ignore the 'autocomplete="no"' value, and don't use 'display: block' to show the '.pac-container'.

go into your chrome devtools and make sure you can see the .pac-container div. set the z-index of that div in your css. When there is a searched value, google will change the display to block and handle the showing and hiding, you just have to worry about the z-index.

answered Nov 25 '13 at 21:47

pedalpete

21,076
45
128
239

14

Thanks, `.pac-container { z-index: 10000 !important; }` worked for me! – Vince Lowe May 09 '14 at 08:16
2

I'm running into this same issue, however z-index is only part of the solution. I'm still unable to get display: block to fire automatically. It is stuck at display: none. Any suggestions? – letsgetsilly May 30 '14 at 17:08
I had an input in a modal window and the pac-container appeared in back of this window. I just try `.pac-container { z-index: 10000 !important; }` on my css and works fine. Thanks!. – mggSoft Apr 06 '15 at 15:04
2

It really depends on the current window's z-index, in my case - kendo modal window, I have to set the z-index to 100000 to bring autocomplete, obviously kendo window modal has a higher z-index than 10000 – uowzd01 May 26 '15 at 03:46
Agree with @uowzd01. It depends on the current modal window's z-index. Mine was a primefaces dialog and I had to set z-index to 2500. – janenz00 Nov 13 '15 at 10:44
1

*NOTE:* Setting z-index in dev tools to test quickly did not work for me but actually setting it on the .pac-container class in my CSS did solve the problem in my case. – munsellj Dec 11 '15 at 17:56
1

I've working on this issue for hours. I am using angular-ui modal with ng-maps and I wanted the place-auto-complete search box on an input. The places suggestions were not showing, then on dev tools at chrome I saw it was there but not rendering. So I just added the .pac-container with the z index and it works. This was the exact solution !!! Thank you so much :) – FraK Nov 06 '16 at 18:12
Had to add the style to global styles (styles.css file) in order for it to work for me. Thanks for the solution. – JasmineUnique Jun 04 '21 at 14:22
I am stuck on this problem. Not with z-index or anything with display:none, but on certain screensizes its being rendered off screen for some reason. Any solutions or ideas on this? – Antony D'Andrea Feb 14 '22 at 10:41

score 12 · Answer 2 · edited Mar 14 '18 at 09:24

12

check version of map in index file

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>

Specify v=3.26 when loading the Google Map API

edited Mar 14 '18 at 09:24

Chris Aelbrecht

2,051
21
25

answered Mar 14 '18 at 06:16

Sagar M

1,168
13
10

My code worked fine for more than a year. Just now out of the blue `style="display:none"` was added to the input element on which the directive was applied. Turned out that specifying the version of googleapis fixed it. I suppose this means that there is a conflict between the directive and the latest gmap api version. – Chris Aelbrecht Mar 14 '18 at 08:36
Hey @ChrisAelbrecht, Experiencing the same problem. Can you help me with this ? – neha soni Mar 14 '18 at 08:52
@nehasoni just load the googleapis as in the example here above – Chris Aelbrecht Mar 14 '18 at 09:52
Saved my evening! – Syed Waqas Mar 14 '18 at 13:54
This should absolutely be the accepted answer: it fixes the problem without incurring any CSS hacks. Just saved my company -hours- of dev time hunting the problem down. – Jesse Dupuy Mar 14 '18 at 18:12
@ChrisAelbrecht Thanks. Worked for me and saved a lot of time. – neha soni Mar 26 '18 at 08:56

score 2 · Answer 3 · answered Sep 19 '17 at 12:58

There's another case where .pac-container won't show up: when u use fixed positioned containers and u leave the <body> without actual relative/static childs the <body> collapses to 0 height or to so small that the bottom edge is higher than where the .pac-containerwould appear. In such case you can see with devtools that pac-container is in right position, and has height, but not visible.

body{min-height:calc(100vh)} could help.

Why `calc()` for a static value? – JCKödel Feb 01 '18 at 02:56 — JCKödel, Feb 01 '18 at 02:56

score 1 · Answer 4 · edited Jul 08 '22 at 03:24

1

As suggested by Vince Lowe in this comment:

.pac-container { z-index: 10000 !important; }

edited Jul 08 '22 at 03:24

Ryan M

18,333
31
67
74

answered Jun 22 '22 at 12:10

Ahmed

56
6

score 0 · Answer 5 · answered Sep 05 '21 at 22:54

0

Ensure that you've enabled the Direction API on google map and that billing is enabled on the account

answered Sep 05 '21 at 22:54

fatiu

1,502
1
8
14

Google Places Autocomplete not showing up

5 Answers5

Linked