> For the complete documentation index, see [llms.txt](https://uxper.gitbook.io/togo-wordpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxper.gitbook.io/togo-wordpress/guide-to-obtaining-an-api-key-for-google-maps-javascript-api.md).

# Guide to Obtaining an API Key for Google Maps JavaScript API

### Requirements

* A Google account (Gmail or Google Workspace).
* A credit card or payment method to enable Google Cloud Platform (GCP). Note: Google offers a $200 free credit for new users, typically sufficient for testing within the free tier.

### Steps

#### Step 1: Create a Project in Google Cloud Platform

1. **Access Google Cloud Console**:
   * Open a browser and navigate to [Google Cloud Console](https://console.cloud.google.com/).
   * Sign in with your Google account.
2. **Create a new project**:
   * Click the project dropdown menu (top-left corner, typically showing the current project name).
   * Select **New Project**.
   * Name the project, e.g., AnimatingSymbolsDemo.
   * Click **Create**.
3. **Select the project**:
   * After creation, select the newly created project from the project dropdown menu.

#### Step 2: Enable Google Maps JavaScript API

1. **Open Library**:
   * In Google Cloud Console, click **Navigation Menu** (☰) > **APIs & Services** > **Library**.
2. **Find and enable API**:
   * Search for **Maps JavaScript API** in the search bar.
   * Click **Maps JavaScript API** and select **Enable**.
   * If the **Enable** button is not visible, the API is already enabled.

#### Step 3: Create an API Key

1. **Access Credentials**:
   * From **APIs & Services**, select **Credentials**.
2. **Generate API Key**:
   * Click **Create Credentials** > **API Key**.
   * An API Key will be generated and displayed. Copy this key for later use.
3. **Secure the API Key (recommended)**:
   * Click **Restrict Key** on the Credentials page.
   * Under **Application restrictions**, select **HTTP referrers (web sites)** and add the URLs where the API will be used (e.g., <http://localhost/\\>\* for local testing or your website’s URL).
   * Under **API restrictions**, select **Restrict key** and choose **Maps JavaScript API** from the list to limit the key’s usage.

#### Step 4: Enable Billing

1. **Link a billing account**:
   * In Google Cloud Console, go to **Billing** via the **Navigation Menu**.
   * Click **Link a billing account** and follow the prompts to add a payment method.
   * Note: Billing must be enabled to use the Maps JavaScript API, but Google’s $200 free monthly credit is usually sufficient for testing.

#### Step 5: Use the API Key in Customizer

1. **Enter the API Key**:
   * Navigate to **Customizer** > **Advanced** > **Google Map API**.
   * Paste the copied API Key into the provided **Google Map API** field.
   * Save the settings to apply the API Key.

#### Notes

* **Free tier limits**: Google provides $200 in free credits monthly for Google Maps Platform. Review the pricing table to ensure usage stays within the free tier.
* **Security**: Do not expose the API Key publicly. Restrict its usage to specific domains.
* **Troubleshooting**: If the map fails to load, verify the API Key restrictions and ensure the Maps JavaScript API is enabled.
* **References**: Consult the Google Maps JavaScript API documentation and API setup guide for further details.