Set up API key across files

[Tinxte]

Summary:

• Ensure Google Maps API key .env variable is consistent across project so the key can be called in HTML header.
• The variable should be prefixed with VITE_ so we may call the API in our React app without Vite exposing its key.

Related to:

External API Usage

[Tinxte]

Relevant references for setup

• Obscuring environmental variables using the VITE_ prefix: https://stackoverflow.com/a/76690218
• Using % to add process.env variable to HTML header in React: https://stackoverflow.com/a/63437691
• If having CORS issues or other errors loading the API, check if Adblock needs disabling, or if your browser is blocking a relevant certificate: https://stackoverflow.com/questions/67525595/cross-origin-request-blocked-the-same-origin-policy-disallows-reading-the-remot

[Tinxte]

GOOGLE MAPS API KEY SETUP

Follow these steps to set up locally:

1. In ThirdPlace-UI (the front end code's directory), create a file with the name .env. Make sure you don't place this in the src directory.
2. Inside .env, paste this: VITE_GOOGLE_MAPS_API_KEY=value
3. Replace value with your API key from Google Maps API.
4. Open your .gitignore file. Insert a line for .env

[Tinxte]

I have successfully set up my local key and shared the above setup instructions with the group over messages. Marking this issue as completed.