Google Maps InvalidKeyMapError when building site with Gatsby and Netlify

Question

I built a Gatsby site which uses a google maps component I grabbed from the npm package "google-maps-react". Everything works fine on my local environment but when I deploy to Netlify I get the 'Google Maps JavaScript API error: InvalidKeyMapError'.

I went through all the steps of making sure my API key is registered and activated correctly. I made sure to declare the API key as an environment variable in the Netlify UI and I access it in my component with 'process.env.GOOGLE_API_KEY'.

import React from "react"
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react"

export class MapContainer extends React.Component {


  render() {

    return (
      <Map google={this.props.google} zoom={14} initialCenter={{lat:37.769461, lng:-122.251831}}>
        <Marker onClick={this.onMarkerClick} name={"Current location"} />
        <InfoWindow onClose={this.onInfoWindowClose}>
          <div>
            ...some code
          </div>
        </InfoWindow>
      </Map>
    )
  }
}

export default GoogleApiWrapper({
    apiKey: (`${process.env.GOOGLE_API_KEY}`)
  })(MapContainer)

From what I've read declaring the GOOGLE_API_KEY environment variable in the Netlify UI was all I needed to do in order to have access to it but I'm clearly missing something. Any help is appreciated, thank you

Answer 1

Environment variables need to start with GATSBY_ in the client-side javascript as shown in the docs.

Use GATSBY_GOOGLE_API_KEY and process.env.GATSBY_GOOGLE_API_KEY for them to be accessed during the build and bundled into your Gatsby client code.