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;
}