Need Help With Deploying React Project With Environment Variable

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
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:

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 >
                    <div className="GoogleMapDiv">
                            {{ id, name, position }) => {
                            return (
                                onClick={() => handleActiveMarker(id)}
                                {activeMarker === id ? (
                                    <InfoWindow onCloseClick={() => setActiveMarker(null)}>
                                ) : null}
            <div className="SummaryPageListDiv">
                { partyResults }

This is the part of my project that utilizes the ‘Geocode’ section for the same Google Maps API key:

  async function get_coordinates(name) {
    return await Geocode.fromAddress(name).then(
      (response) => {
        const { lat, lng } = response.results[0].geometry.location;
        let position = { lat: lat, lng: lng }
        // Related Stackoverflow post:
        return position
      (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!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.