How to set a default value for a Google places API auto complete textbox

Question

I'm working on a page close enough to the one in google samples https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform and it works fine.

However I need to add one more feature is to set the value of the autocomplete by default to be the current user city.

I'm using the following code to get the city and the country of the logged in user using geolocation API in HTML5. However the challenge is to make the autocomplete accept this value as it's default value. When I try to put the value in the textbox directly the autocomplete consider it as a wrong value.

navigator.geolocation.getCurrentPosition(function(pos) {
   var currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
   var geocoder = new google.maps.Geocoder();
   var city = "";
   var country = "";
   geocoder.geocode({'latLng': currentLocation}, function(results, status, from) {
      if (status == google.maps.GeocoderStatus.OK) {
         if (results[1]) {
            for (var i = 0; i < results[0].address_components.length; i++) {
               for (var b = 0; b < results[0].address_components[i].types.length; b++) {
                  if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                     city = results[0].address_components[i];
                     break;
                  }
                  if (results[0].address_components[i].types[b] == "country") {
                     country = results[0].address_components[i];
                     break;
                  }
               }
            }
            var fromDefault = city.long_name + " - " + country.long_name;
            $('#address-from').val(fromDefault);
         }
      }
   });
}, 
function(error) {                    
   alert('Unable to get location: ' + error.message);
}, options);

Any idea how to manually fill in the default value for the autocomplete places textbox?

did you solved this??? please help i am also in same problem.... — Elizabeth, May 31 '16 at 06:07
Sorry for the late response, but no I didn't solve it and I have to take the long route to build a while custom autocomplete. please let me know if you reached anything — Joseph Wahba, Jun 12 '16 at 14:11

score 8 · Answer 1 · edited May 23 '17 at 12:25

I had the same requirement of setting the initial location when the Map initally loads.

This is how I did it:

As Jon Hannah mentioned, I used the Autocomplete Service to get the prediction, then used the first prediction to get the Place (using place_id). Populated the Autocompelete input with my default location string. Finally triggered the place_change event.

  this.input.nativeElement.value = this.testLocationStr;

  let autocompleteService = new google.maps.places.AutocompleteService();
  let request = {input: this.testLocationStr};
  autocompleteService.getPlacePredictions(request, (predictionsArr, placesServiceStatus) => {
    console.log('getting place predictions :: predictionsArr = ', predictionsArr, '\n',
      'placesServiceStatus = ', placesServiceStatus);

    let placeRequest = {placeId: predictionsArr[0].place_id};
    let placeService = new google.maps.places.PlacesService(this.mapObj);
    placeService.getDetails(placeRequest, (placeResult, placeServiceStatus) => {
      console.log('placeService :: placeResult = ', placeResult, '\n',
        'placeServiceStatus = ', placeServiceStatus);

      this._handlePlaceChange(placeResult);

    });
  });

Plunker: https://plnkr.co/edit/9oN6Kg?p=preview

score 6 · Answer 2 · answered Jul 29 '16 at 10:42

I came across this post while trying to solve for a similar use case (populating the Autocomplete with the last place a user searched for).

As far as I can tell it is not possible to set a default for the Autocomplete that it recognises as a place. However, I think you can simulate this effect using the Autocomplete Service (example - also see the reference sections on #AutocompletePrediction and #PlacesService):

Set your Autocomplete to the identified city and country as you are already
Pass the city and country to the Autocomplete Service
Determine the place ID of your preferred prediction (e.g. select the first prediction with type = 'city')
Use the Places Service to get the details (PlaceResult) for your chosen place ID (same result as using autocomplete.getPlace())
Have a callback that does what you need with the PlaceResult

This gives your user the impression that the Autocomplete is in use. If the result is what they need, great! If they want to search for a different place set up your autocomplete to listen for place_changed and run autocomplete.getPlace() followed by the same callback.

if you can, please beligerate that answer – terrorista Jul 29 '16 at 10:43 — terrorista, Jul 29 '16 at 10:43
I don't understand - what are you asking me to do? – Jon Hannah Jul 29 '16 at 15:42 — Jon Hannah, Jul 29 '16 at 15:42
I think he wants you to declare war against the answer – Tony Brasunas Apr 23 '18 at 22:31 — Tony Brasunas, Apr 23 '18 at 22:31

How to set a default value for a Google places API auto complete textbox

2 Answers2

Linked