Getting response, but not seeing it in code, using Google's libraries to call the Places API

Question

I have a React application that calls the Places API through Google's dedicated places library.

The library is imported as such: <script defer src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=places&callback=initPlaces"></script>

The code above is inside /public, in index.html. The initPlaces callback, specified in the URL looks as such:

function initPlaces() {
    console.log("Places initialized");
}

To make the actual request, the following code is used:

async function makeGapiRequest() {
    const service = new window.google.maps.places.AutocompleteService();

    const response = await service.getQueryPredictions({
        input: "Verona"
    });

    console.log(res);
}

For testing purposes, the function is called when the document is clicked:

document.addEventListener("click", () => {
    makeGapiRequest();
});

On every request, there is a response coming back. For instance, when the input has the value of Verona, the following response is received, and is only visible in the browser network tab:

{
    predictions: [
        {
             description: "Verona, VR, Italy",
             ...
        },
        ...
    ],
    status: "OK"
}

Whenever maleGapiRequest is called, even though there is a visible response from the API, the response variable is undefined at the time of logging, and the following error is thrown in the console:

places_impl.js:31 Uncaught TypeError: c is not a function
    at places_impl.js:31:207
    at Tha.e [as l] (places_impl.js:25:320)
    at Object.c [as _sfiq7u] (common.js:97:253)
    at VM964 AutocompletionService.GetQueryPredictionsJson:1:28

This code is thrown from the Places library imported in /public/index.html.

Did anyone encounter this error before, or has an idea as to what is the problem? I would like it if the solution was available to me, not the library.

Answer 1

The problem was that I was calling the wrong method. Instead of getQueryPredictions call the getPlacePredictions method. It will return different results, but you can configure it to suite your needs.

Old code:

async function makeGapiRequest() {
    const service = new window.google.maps.places.AutocompleteService();

    const response = await service.getQueryPredictions({
        input: "Verona"
    });

    console.log(res);
}

New code:

async function makeGapiRequest() {
    const service = new window.google.maps.places.AutocompleteService();

    const response = await service.getPlacePredictions({
        input: "Verona",
        types: ["(cities)"]
    });

    console.log(res);
}