CODEWITHSUNDEEP
angularjsgoogle-maps-api-3angularjs-directivegoogle-places-api
pedalpete
pedalpete

Reputation: 21566

Google Places Autocomplete not showing up

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.

Upvotes: 40

Views: 31424

Answers (5)

Ahmed
Ahmed

Reputation: 36

As suggested by Vince Lowe in this comment:

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

Upvotes: 2

fatiu
fatiu

Reputation: 1538

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

Upvotes: -1

Sagar M
Sagar M

Reputation: 1376

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

Upvotes: 12

zsitro
zsitro

Reputation: 1892

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.

Upvotes: 2

pedalpete
pedalpete

Reputation: 21566

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.

Upvotes: 68

Related Questions