Guide to Obtaining an API Key for Google Maps JavaScript API

This document provides step-by-step instructions for obtaining an API Key from Google Cloud Platform (GCP) to use with the "Animating Symbols" example in the Google Maps JavaScript API, which displays

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.

   • 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.