Google Places Autocomplete not showing up

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.


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


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.