Hello there,
I have a React project utilizing the Google Maps API key that runs locally without an issue to use ‘process.env’ with the relevant API key stored inside the ‘.env’ file.
However, I added the same ‘REACT_APP_GOOGLE_API_KEY’ to my Environment Variables section in Render, and deployed the same project on Render only to get this error:
Google Maps JavaScript API error: InvalidKeyMapError
invalid-key-map-error
App.js:73 Error: The provided API key is invalid. .
Server returned status code REQUEST_DENIED
I referred to the related Docs page you guys have on this topic aka the ‘deploy-create-react-app’ article link (can’t link this here for some reason on your end).
I then added the following to the ‘build’ script that runs for my project when its deployed on Render:
# Adding Google Maps API key specific environment variable:
# From the Render docs page:
export REACT_APP_GOOGLE_API_KEY=$REACT_APP_GOOGLE_API_KEY
Yet I got that error above ^.
Any ideas on what I could possibly do to fix this?
The only thing I can add is that I literally use this with ‘process.env’ in the code itself to access that environment variable within the React project, is this the correct method if I deploy this to Render?
This is the return statement for the ‘Summary’ section of my project that uses this:
return (
<div >
<h1>Map</h1>
<LoadScript
googleMapsApiKey={process.env.REACT_APP_GOOGLE_API_KEY}
>
<div className="GoogleMapDiv">
<GoogleMap
mapContainerStyle={containerStyle}
center={centers[0]}
zoom={3}
>
{markers.map(({ id, name, position }) => {
return (
<Marker
key={id}
position={position}
onClick={() => handleActiveMarker(id)}
>
{activeMarker === id ? (
<InfoWindow onCloseClick={() => setActiveMarker(null)}>
<div>{name}</div>
</InfoWindow>
) : null}
</Marker>
)})}
</GoogleMap>
</div>
</LoadScript>
<h1>Summary</h1>
<div className="SummaryPageListDiv">
{ partyResults }
</div>
</div>
)
This is the part of my project that utilizes the ‘Geocode’ section for the same Google Maps API key:
async function get_coordinates(name) {
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_API_KEY);
Geocode.setLanguage("en");
Geocode.setLocationType("ROOFTOP");
return await Geocode.fromAddress(name).then(
(response) => {
const { lat, lng } = response.results[0].geometry.location;
let position = { lat: lat, lng: lng }
// Related Stackoverflow post:
// https://stackoverflow.com/questions/38884522/why-is-my-asynchronous-function-returning-promise-pending-instead-of-a-val
return position
},
(error) => {
console.error(error);
}
).then((response) => {
return response;
})}
It turns out that it was an issue on my end with the Environment Variable having an additional unnecessary character present. Now it works like a charm with this revision.
Please feel free to close this one, thanks!