Google Maps Api Autocomplete.getplace() Inconsistently Returns Geometry

I'm using GoogleMaps Autocomplete in an AngularJS application and when I call... autocomplete.getPlace(); half the time when i try to use place it says geometry is null and half

Solution 1:

I had this same issue with a Vue.js app. The first attempt to getPlace() returned undefined and the second would return the google place object as expected.

The issue was actually attempting to v-model the same data attribute I was setting equal to new google.maps.places.Autocomplete(input).

originally I was doing this:

const input = this.$refs.autocomplete;
    const options = {
      types: ['address'],
    };

    this.autocomplete = new google.maps.places.Autocomplete(
      input,
      options,
    );

    this.autocomplete.setFields(['address_components', 'name']);

    this.autocomplete.addListener('place_changed', () => {
      let place = this.autocomplete.getPlace();
      console.log(place, 'place');
    });

but what wound up working for me was:

const self = this;

const input = this.$refs.autocomplete;
const options = {
  types: ['address'],
};

let auto_complete = new google.maps.places.Autocomplete(
  input,
  options,
);

auto_complete.setFields(['address_components', 'name']);

auto_complete.addListener('place_changed', () => {
  self.autocomplete = auto_complete.getPlace();
  console.log(self.autocomplete, 'place');
});

with this being the data I was originally trying to set/model:

data() {
  return {
    autocomplete: '',
  };
}

and this being the template:

<input
  v-model="location"
  ref="autocomplete"type="text"
/>

resources: https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

Solution 2:

Okay so this was a really hard problem to solve because the cause wasn't apparent...autoComplete.getPlace() would just return 'undefined' the first time I called it on each new address.

I'm still not sure why that's happening and neither is Google because I used our google cloud support to see if they had any ideas, it turns out they didn't.

Here's the solution I came up with... essentially in the "Creating AutoComplete" section of my code above I abandon autocomplete and replaced it with google.maps.places.

Be sure to add "places" in your call to the google API...

<scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=YourKey&libraries=imagery,places">

This is what it looks like...

$scope.initAutoComplete = function(){

                    //get textbox used for address or place searchvar input = document.getElementById('autocomplete');

                    //create google places variable and bind input to it.var searchBox = new google.maps.places.SearchBox(input);


                    // When the user selects an address from the dropdown, 
                      trigger functionsearchBox.addListener('places_changed', function () {
                        //calling "getPlaces" instead of get place()

                        var place = searchBox.getPlaces();

                        //passing place to my dropPin service
                        rcisMapService.dropPin(place);
                    });
                };

I also added class="controls" to the used for address/place search

This solution consistently returns every time.