0

I'm working on a React app that uses Google Places API. I'm having trouble getting results from my function that makes the call to Google API -- I think because the API call is an async one.

I created a file that contains all Google Places functions that look like this:

const googlePlacesAutocomplete = new google.maps.places.AutocompleteService();

const callbackGetAddressQueryPredictions = (predictions, status) => {

    if(status !== google.maps.places.PlacesServiceStatus.OK) return null;
    return predictions;
}

export const googlePlacesAutoComplete = (keyword) => {

    googlePlacesAutocomplete.getQueryPredictions({input: keyword}, callbackGetAddressQueryPredictions);
}

In my React component, I import the googlePlacesAutoComplete() function like so:

import {googlePlacesAutoComplete} from '../googlePlaces';

I'm testing this with the following call in my React component but not getting anything.

onChangeAddress(event) {  
     const suggestions = googlePlacesAutoComplete("123 Main Street");
}

I'm sure I'm making a basic error due to my limited JS/ES2015 knowledge. Where am I going wrong?

UPDATE: I tried returning results from the googlePlacesAutoComplete() function -- though it was an ugly kludge, just wanted to see if that's the issue. This is what I tried:

const googlePlacesAutocomplete = new google.maps.places.AutocompleteService();
let suggestions = [];

const callbackGetAddressQueryPredictions = (predictions, status) => {

  if(status !== google.maps.places.PlacesServiceStatus.OK) {
     suggestions = predictions;
  }
}

export const googlePlacesAutoComplete = (keyword) => {

   googlePlacesAutocomplete.getQueryPredictions({input: keyword}, callbackGetAddressQueryPredictions);
   return suggestions;
}
Sam
  • 26,817
  • 58
  • 206
  • 383

0 Answers0