How to Style the Dropdown on Google Places Autocomplete API

How do you style the dropdown on Google Places Autocomplete API?

If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.

Styles for google places autocomplete not working

I was able to change it by adding all those classes in my theme variables.scss. Really ashamed I wasn't able to check that one out at first.

Google Place Autocomplete dropdown falling below screen

In short: make sure the input field is never too low.

In Long: Google doesn't give us any control over the placement of the dropdown. There's nothing in the documentation about placement on the screen.

So we have 2 choices:

1. Use css to make sure there's always room under the input field. margin-bottom: 190px; for example.
2. Write our own dropdown using the AutocompleteService to back it up.

Obviously 2 is a lot more work, but you also have a lot more control of the look and placement.

Google Place Autocomplete API dropdown does not show in Modal

The dropdown competes with the z-index of #searchModal (1041).

With the following CSS definition the dropdown should appear on top:

.pac-container {
    z-index: 1042;
}

Here's the fiddle. Please replace "YOUR_API_KEY" with one of your own.

Google places API not showing autocomplete dropdown

I found solution for your problem . When i made calls in your auto-complete input ,a call was being made to google places Autocomplete . But the response returns an error saying [3,null,null,"This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console: https://console.developers.google.com/apis/library?project=_ Please ensure this API is activated in the Google Developers Console: https://console.developers.google.com/apis/api/places_backend?project=_ For more information on authentication and Google Maps Javascript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key"] ) . So kindly check , either you have not activated this API or this API key you are using is not correct . First check , may be your API is not turned on . And make sure , you generate your API for Google Maps JavaScript API . I am also adding a snapshot of the error i received .

---

Related Topics