Take the 2-minute tour ×

I have the following jQuery code which works well with getting the city list for the selected country.

var city;   var place;

    input = this, options = {
        types: ['(cities)'],
        componentRestrictions: {
            country: $('#country option:selected').val()
    city = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(city, 'place_changed', function() {
        place = city.getPlace();

Basically, once the person selects the place, it replaces the value in the input box with the "city" value without the country.

It looks a little stupid having City, Country in the dropdown menu when the user has already selected a country, so does anybody know if it is possible to display JUST the city name if you have defined a componentRestrictions value restricting the results to a country?

I find my current method of setting it once the selection has been made to be a bit... rubbish really...

share|improve this question
I've read through your question several times and I don't feel like I completely understand what you are describing. I think maybe if you included some of the markup, it would give the question some context and help everyone understand. Or maybe a link to your page or an example on jsFiddle? –  Sean Mickey May 16 '12 at 22:07
Generally speaking, can you edit what's in the dropdown? I mean, if the country name is known, replace it out of the dropdown displayed entry. –  Tina CG Hoehr May 16 '12 at 22:09
The dropdown is generated by Google. also a fiddle of the code would not work and a link to my page would be no help what-so-ever as once the problem is fixed it would not appear on the page, rendering the question useless once it has been answered for any other people wanting to do something like this. –  Andrew Willis May 17 '12 at 15:34
@AndrewWillis It's very common for folks on here to share links or set up a jsFiddle to look at things more deeply and share ideas. It's customary after that process, to add follow-up comments or question/answer edits to be sure that what was learned from that process is saved for the benefit of everyone. If you don't want to share a link or set up a jsFiddle, it's cool, but it makes it hard for anyone to understand the details of what you want to achieve or what may be the root of your problem. If you give it a try, I guarantee you will see more activity on this question. Just trying to help- –  Sean Mickey May 21 '12 at 4:59
I know, I have set up fiddles for other questions BUT with Google Places, the API only works on my domain and, as such, would require me to reconfigure the application. It would also use up my daily limit of queries while people try out their code! –  Andrew Willis May 21 '12 at 8:18
show 1 more comment

4 Answers

up vote 2 down vote accepted

The short answer is: the response content in the Autocomplete is controlled by Google (you mention this in one of your comments) and the Autocompleteapi-doc doesn't provide a way to customize the response text that is displayed, other than changing the placeholder textdev-guide. The solution you are using is about the best option you have (and is a little reactive, but I don't know if its really "rubbish").

Other than that, if you are less than satisfied with that approach, you could always just create your own input area and take complete control of the request-response back and forth yourself. You can use the Places Librarydev-guide directly and take complete control of everything that is shown.

share|improve this answer
add comment

When invoking Google API, specify attribute "region":

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=your_key&language=fr&region=FR"></script>

Then, when you create an Autocomplete object, specify the country in the componentRestriction attribute, so that it reflects the region you specified:

    new google.maps.places.Autocomplete(
            componentRestrictions: {country: "fr"},
            types: ["(regions)"]

share|improve this answer
Is this a new feature to the Google Maps API? I posted this question almost two years ago! –  Andrew Willis Mar 22 at 16:06
add comment

I wait 100 milleseconds, and then replace the text box with the content I want.

Except in my case I want a blank box, but insert a single space.

share|improve this answer
add comment

Also you can help yourself by css - hiding last span (=state) in autocomplete item.

.pac-item > span:last-child {
    display: none;
share|improve this answer
add comment

Your Answer


