Tengo una aplicación React que llama a la API de lugares a través de la biblioteca de places dedicados de Google.

La biblioteca se importa como tal: <script defer src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=places&callback=initPlaces"></script>

El código anterior está dentro /public , en index.html . La devolución de llamada de initPlaces , especificada en la URL, se ve así:

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

Para realizar la solicitud real, se utiliza el siguiente código:

 async function makeGapiRequest() { const service = new window.google.maps.places.AutocompleteService(); const response = await service.getQueryPredictions({ input: "Verona" }); console.log(res); }

Para fines de prueba, se llama a la función cuando se hace clic en el documento:

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

En cada solicitud, hay una respuesta que regresa. Por ejemplo, cuando la input tiene el valor de Verona , se recibe la siguiente respuesta y solo es visible en la pestaña de red del navegador:

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

Cada vez que se llama a maleGapiRequest , aunque haya una respuesta visible de la API, la variable de response no está definida en el momento del registro y aparece el siguiente error en la consola:

 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

Este código se genera desde la biblioteca de lugares importada en /public/index.html .

¿Alguien encontró este error antes, o tiene una idea de cuál es el problema? Me gustaría que la solución estuviera disponible para mí, no la biblioteca.