'Hide API Key that's a REACT prop

Question

I am building a Google Map component with a Marker. According to the documentation, I need to wrap the component in a Wrapper and pass in my API key as a prop, like this:

<Wrapper apiKey="My-API-key-comes-here" render={render}>
    <GoogleMap />
</Wrapper>

Whilst I managed to hide the key from the API calls themselves (I also use the Geocoding API) by calling them from a backend, I don't know how to hide the API key when it is a prop.

I tried:

<Wrapper apiKey={process.env.GOOGLE_API_KEY} render={render}>
    <GoogleMap />
</Wrapper>

That does not work and it's not really a fix either as the API key could still be pinched on from the frontend.

Google does it in their example like this:

<Wrapper apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY!} render={render}>
    <GoogleMap />
</Wrapper>

When I try this, I get the following error:

File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         columnNumber: 9
|       }, this), /*#__PURE__*/_jsxDEV(Wrapper, {
>         apiKey: import.meta.env.GOOGLE_API_KEY,
|         render: render,
|         children: /*#__PURE__*/_jsxDEV(GoogleMap, {}, void 0, false, {

Here is Google's Sandbox: https://codesandbox.io/embed/github/googlemaps/js-samples/tree/sample-react-map

Anyone has a good practice that's safe and sound?

Many thanks!

Answer 1

Just use the google map generator https://google-map-generator.com/