CODEWITHSUNDEEP
javascriptcssgoogle-maps-autocomplete
HotelAlpha744
HotelAlpha744

Reputation: 39

Google Map Autocomplete Drop-Up List

I am using the google map Autocomplete. I have a div element where I have an input element to search the location. And I get a drop-down list of possible locations. How can I get the list to be on the top instead of showing below the search text-field (As a "Drop-up" list ??).

Reference: https://developers.google.com/maps/documentation/javascript/places-autocomplete#places_searchbox

Upvotes: 1

Views: 776

Answers (1)

HotelAlpha744
HotelAlpha744

Reputation: 39

Actually, I got it working after certain hours of trial and error! For future references, if somebody has the same issue, here's how I got it working.

The element where the locations are listed is given the class name of "pac-container" by google API. Google API Elements for Autocomplete

So, just had to play with the CSS for the "pac-container" element to show on top.

Here's the CSS:

.pac-container
{
	position:fixed;
	display:block;
	margin-top: -210px;
}

And this is how a search looks now:Google Autocomplete Drop-up for Dallas Search

Upvotes: 2

Related Questions