# Environment Variables

We use environment variables to store secrets such as API keys.

## How This Project Sets Per-Environment Variables

To set environment variables in each environment:

* Dev: Copy *.env.example* to *.env* then replace any sample values with real ones as per below
* Prod: Set the Preview and Production values in [Vercel > Settings > Environment Variables](https://vercel.com/margaritahumanitarian/helpafamily/settings/environment-variables)

## Google Maps API Key

`NEXT_PUBLIC_GMAPS_JS_API_KEY`

API key for the Maps JavaScript API.

### Getting a Key

Instructions for getting this key: [Maps JavaScript API: Using API Keys > Creating API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key#creating-api-keys)

In the Google console, name it something like **NEXT\_PUBLIC\_GMAPS\_JS\_API\_KEY (Dev, audreyfeldroy)** or **NEXT\_PUBLIC\_GMAPS\_JS\_API\_KEY (Prod)**:

![Google Maps JS API Key Naming](https://105995858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miqf1op0l9iIetnzKxI%2Fsync%2F82882b78e43d195d644cff8e1691aca2c135d54b.png?generation=1631114643805919\&alt=media)

That will help you identify which key is for which environment.

### Key Restrictions

If you're just using this key for local development, it's okay to leave *Key restrictions* as None like this:

![Google Maps JS API Key Restrictions: Dev Environment](https://105995858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miqf1op0l9iIetnzKxI%2Fsync%2F8aff16cb949d1d4e0faf671a852eb197b5202425.png?generation=1631114637085591\&alt=media) For the Vercel preview key, the *Website restrictions* setting will be something like:

A production key should have these restrictions:

![Google Maps JS API Key Restrictions: Prod Environment](https://105995858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miqf1op0l9iIetnzKxI%2Fsync%2F51a8e4c201b0c19a4a2451c035e8d63336cd4150.png?generation=1631114636981583\&alt=media)

## Setting Your Key for Local Development

When you run `yarn dev`, if your Google Maps JS API Key isn't set yet you'll get an error in the browser JS console like:

> js?v=3.exp\&libraries=geometry,drawing,places\&key=undefined:100 Google Maps JavaScript API error: InvalidKeyMapError <https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error>

To fix that:

1. Set this in `.env`, replacing it with your actual key:

NEXT\_PUBLIC\_GMAPS\_JS\_API\_KEY = ""

1. ???


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://margaritahumanitarian.gitbook.io/help-a-family-manual/env_vars.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.