Using env variables for a simple google map

Coding Help
1

Hi!

I’m new to coding with glitch

I want to use the google maps javascript API in my .js file.

There are only two files: index.html & script.js

I have the .env variable (MAP_API_KEY in my case) setup in script.js file & refencing it as

 key:  process.env.MAP_API_KEY,

However, when I preview my html doc. there is below error on browser console tab

Uncaught ReferenceError: process is not defined

It works fine when I add api key directly as text in value

 key:  "xyz_my_api_key_text_here_...",

I know it’s best to use the .env in order not to expose the API key.

How can I use the process.env.MAP_API_KEY?

Pls help!

2

if this is to be used in the browser, I don’t think it’s meant to be secret. you just send it to every visitor, whether it’s coded into the js file or the server reads it from an env variable

1 Like
3

Ok.

How can I hide it then?

As I said in original post. I currently have 2 files (index.html & script.js)

In some posts it is said to use a server. But, isn’t that glitch is on a node server and using process.env.API-KEY should work? I’m just guessing but correct me if I’m wrong…

How can I hide my API keys

4

you can’t hide it if you’re doing it in index.html or script.js. you first have to remix a node starter, then you can use process.env and hide stuff

5

I don’t think the design of Google maps intends for you to hide it.

if it’s a key you use on the server side, then yes you could hide it by putting it in the .env file, but it sounds like your app doesn’t do anything on the server side.

1 Like
6

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