JavaScript AutoFill in Google Places: Can I remove a country from a place name?

Question

I have the following jQuery code that works well with getting a list of cities for the selected country.

var city; var place; $('#city').on('focus',function(){ 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(); $(input).val(place.address_components[0].long_name); }) }) 

In principle, as soon as a person selects a place, he replaces the value in the input field with the value "city" without a country.

The drop-down menu looks a little silly if the user has already selected the country, so does anyone know if it is possible to display the city name JUST if you defined a componentRestrictions value that restricts the results to the country?

I find my current installation method as soon as the choice has been made a little ... trash really ...

Answer 1

Short answer: The content of the response in Autocomplete controlled by Google (you mentioned this in one of your comments) and the Autocomplete ^api-doc does not provide a way to customize the displayed response text, other than changing the ^dev-guide placeholder text . The solution you use is the best option you have (and it reacts a bit, but I don’t know if this is really “trash”).

In addition, if you are less than satisfied with this approach, you can always simply create your own input area and fully control the response of the request-back. You can directly use the ^dev-guide library of places and fully control everything that is shown.

Answer 2

When calling the Google API, specify the 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 the Autocomplete object, specify the country in the componentRestriction attribute so that it reflects the region in which you are negotiated:

     new google.maps.places.Autocomplete (
         $ ("# my-input-field"). get (0),
         {
             componentRestrictions: {country: "fr"},
             types: ["(regions)"]
         }
     );

Answer 3

You can also help yourself css - hide the last space (= state) in the autocomplete element.

 .pac-item > span:last-child { display: none; } 

Answer 4

I wait for 100 milliseconds and then replace the text box with the content I want.

Except in my case, I want an empty field, but insert one space.