Exploring the functionalities of the Google Places API has been my recent focus, however, I've encountered an obstacle that has me puzzled. While making API calls to a local proxy server, everything seems to be functioning well except when attempting to retrieve an image for a particular business.
I meticulously checked each part of the GET request URL by logging them in the console to ensure that they are concatenated correctly. Upon pasting the URL directly into the browser, it returns the expected result. It seems like there might be a generic code issue rather than a problem specific to the Places API itself. Any help in resolving this would be greatly appreciated.
The error generated from the terminal on the proxy server doesn't offer much insight, but perhaps someone can identify something that I may have overlooked:
undefined:1 ���� ^
SyntaxError: Unexpected token � in JSON at position 0
This is the front-end code snippet being used:
function makeAPICall(url) {
return fetch(url);
}
makeAPICall(`http://localhost:5000/places/${searchString}`)
.then(response => {
return response.json();
})
.then(data => {
responseObject = data.results;
renderResult(responseObject[10]);
return responseObject[10];
})
.then(responseObject => {
makeAPICall(`http://localhost:5000/place/image/${responseObject.photos[0].photo_reference}`)
.then(response => {
return response.json();
})
.then(photoData => {
console.log(photoData);
});
});
The following section showcases the proxy server's code (excluding operational routes not related to the issue):
require('dotenv').config({path: '../.env'});
const express = require('express');
const request = require('request');
const GOOGLE_API_KEY = process.env.API_KEY;
const placesImgURL = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=';
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
next();
});
app.get('/place/image/:query', (req, res) => {
request(
{ url: `${placesImgURL}${req.params.query}&key=${GOOGLE_API_KEY}` },
(error, response, body) => {
if (error || response.statusCode !== 200) {
console.log(response);
}
res.json(JSON.parse(body));
}
)
});
const PORT = process.env.PORT || 4000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));
UPDATE:
An error within the server code occurs at this line:
res.json(JSON.parse(body));
A network call screenshot captured from the dev tools interface is available here: https://i.stack.imgur.com/0Zv4r.png
Upon examining the line that triggers the error through console logging, I'm presented with an extensive log:
// Extremely long log output removed due to space constraints