This document describes the steps you need to start using the Maps JavaScript API.


To start using the Maps JavaScript API, you can either request a Maps Demo Key or set up an account and enable billing.

## Get a Maps Demo Key

The Maps Demo Key is a no-cost feature that lets you start prototyping with select Maps JavaScript API features,
without entering billing information. The Maps Demo Key is intended
for testing and prototyping purposes only, and is not designed for production use. To learn more,
see
[Get a Maps Demo Key and use it with the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/demo-key.md.txt)

## Get a standard API key

When you're ready for to move your code to production, complete the following steps to
create an API key and enable billing.

## Prerequisites

This procedure guides you through setting up a Google Cloud Account and
Google Cloud project with billing enabled.


You should also be familiar with how you are charged for using the Maps JavaScript API.

1. **Review** billing and cost for usage at [Maps JavaScript API Usage and Billing](https://developers.google.com/maps/documentation/javascript/usage-and-billing.md.txt).
2. **Verify** that you have a
   [Google Cloud Account](https://support.google.com/accounts/answer/15277265).

   [Sign in to the Google Cloud console](https://console.cloud.google.com/google/maps-apis/overview?utm_source=Docs_SignIn&utm_content=Docs_maps-backend&ref=/maps/documentation/javascript/get-api-key)

   > [!NOTE]
   > **Note:** If you are a new user and don't have a Google Cloud Account, meaning you cannot sign in to the console, see [Getting started with Google Maps Platform](https://developers.google.com/maps/get-started.md.txt).

3. **Verify** that you have a
   [Google Cloud project](https://cloud.google.com/apis/docs/getting-started#creating_a_google_project)
   with billing enabled.

   [Go to the Billing page](https://console.cloud.google.com/projectselector/billing?utm_source=Docs_Billing&utm_content=Docs_maps-backend&ref=/maps/documentation/javascript/get-api-key)

   > [!NOTE]
   > **Note:** If you are a new user and don't have a Google Cloud project, see [Getting started with Google Maps Platform](https://developers.google.com/maps/get-started.md.txt).

   1. Select your project to open the **Billing** page.
   2. On the **Billing** page:

      - If billing is already enabled for the selected project, and you only have a single billing account, then the **Billing** page opens.
      - If you have multiple billing accounts, select **Go to linked billing account** to see the details about the billing account associated with the project.
      - If a billing account exists but is not associated with the project, you are prompted to link a billing account with the project.
      - If no billing account exists, or you want to create a new billing a account, select **Manage Billing Accounts** to create a new billing account. For more information, see [Create a new self-serve Cloud Billing account](https://cloud.google.com/billing/docs/how-to/create-billing-account).

## Enable the API

Before you can use Maps JavaScript API, you must use the Google Cloud console or the
[`gcloud`](https://cloud.google.com/sdk) command to enable
it in your Google Cloud project.

> [!NOTE]
> **Note:**After you enable an API you might have to wait a few minutes before you can make a request to it.

To enable the API:

### Console

1. Open the product page in the Google Cloud console:

   [Enable the Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com?utm_source=Docs_EnableAPIs&utm_content=Docs_maps-backend&ref=/maps/documentation/javascript/get-api-key)
2. Click the **Enable** button.

   > [!NOTE]
   > **Note:** If the API is already enabled, you see the **Manage** button instead of **Enable**.

### gcloud

```bash
gcloud services enable \
    --project "PROJECT" \
    "maps-backend.googleapis.com"
```

Read more about the [Google Cloud SDK](https://cloud.google.com/sdk), [Cloud SDK installation](https://cloud.google.com/sdk/docs/install), and the following commands:

- [`gcloud services enable`](https://cloud.google.com/sdk/gcloud/reference/services/enable)
- [`gcloud services disable`](https://cloud.google.com/sdk/gcloud/reference/services/disable)

## Get an API key for use with Maps JavaScript API

Google Maps Platform products are secured from unauthorized use by requiring API calls to include an **API key**.

An [API key](https://cloud.google.com/docs/authentication/api-keys) is a unique alphanumeric string that associates your Cloud Billing account and Google Cloud project with the request your application makes to a Google Maps Platform API or SDK. To create a new key or add an API or SDK to an existing key, follow these instructions.

### Console

1. Go to the **Google Maps Platform \> Keys \& Credentials**
   page.

   [Go to the Keys \&
   Credentials page](https://console.cloud.google.com/projectselector/google/maps-apis/credentials?utm_source=Docs_ManageAPIKey&utm_content=Docs_maps-backend&ref=/maps/documentation/javascript/get-api-key)
2. If prompted, select your project.
3. Do one of the following:

   - **Create a new key**:

     1. Click **Create credentials \> API key**.
     2. In the **Create API key** panel, open the **Select API restrictions** list.
     3. Clear any APIs that this key doesn't need, and make sure **Maps JavaScript API** stays selected.
     4. Click **Create**. The panel displays your new API key.
   - **Use an existing key**:

     1. Click the name of the key.
     2. In the **Select API restrictions** list, select **Maps JavaScript API**.
     3. Click **Save**.

   Selecting an API here doesn't enable it. Make sure
   Maps JavaScript API is enabled on its
   [API Library page](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com).
4. To see the key string later, go to the **Keys \& Credentials** page and click **Show key** for the key.

If the console looks different from these steps, see
[Create an API key](https://cloud.google.com/docs/authentication/api-keys#create) and
[Add API restrictions](https://cloud.google.com/docs/authentication/api-keys#adding-api-restrictions) in the Google Cloud documentation.

### gcloud

Replace <var translate="no">PROJECT_ID</var> with your project ID in the following
commands.

- **Create a new key** : Run the following command, and
  replace <var translate="no">DISPLAY_NAME</var> with a name for the key.

  ```bash
  gcloud services api-keys create \
      --project="PROJECT_ID" \
      --display-name="DISPLAY_NAME" \
      --api-target=service=maps-backend.googleapis.com
  ```

  Read more about the [Google Cloud SDK](https://cloud.google.com/sdk), [Cloud SDK installation](https://cloud.google.com/sdk/docs/install), and the following commands:
  - [`gcloud services api-keys create`](https://cloud.google.com/sdk/gcloud/reference/services/api-keys/create)
- **Use an existing key** : Run the following command, and
  replace <var translate="no">KEY_ID</var> with the ID of the key.
  The `--append` flag keeps
  the APIs that the key already allows. Without it, the command replaces
  them.

  ```bash
  gcloud services api-keys update KEY_ID \
      --project="PROJECT_ID" \
      --append \
      --api-target=service=maps-backend.googleapis.com
  ```

  Read more about the [Google Cloud SDK](https://cloud.google.com/sdk), [Cloud SDK installation](https://cloud.google.com/sdk/docs/install), and the following commands:
  - [`gcloud services api-keys update`](https://cloud.google.com/sdk/gcloud/reference/services/api-keys/update)
  - [`gcloud services api-keys list`](https://cloud.google.com/sdk/gcloud/reference/services/api-keys/list)

  The key ID isn't the key string or display name. To find it, run
  `gcloud services api-keys list --project="PROJECT_ID"`.
  The ID is the last part of
  the `name` field:
  `projects/PROJECT_NUMBER/locations/global/keys/KEY_ID`.

To see the key string, run
`gcloud services api-keys get-key-string KEY_ID
--project="PROJECT_ID"`.

## Make an API request

Make a Maps JavaScript API request to display a map of the United States. You must include your
API key's alphanumeric string with every request and use HTTPS for requests that include the
API key.

1. Open your default text editor.
2. Create an HTML file and name it `index.html`.
3. Add the following code to the file:

   ```javascript
   <html>
     <head>
       <title>Add a Map using HTML</title>

       <link rel="stylesheet" type="text/css" href="./style.css" />
       <script type="module" src="./index.js"></script>
     </head>
     <body>
       <gmp-map
         center="38.7946,-106.5348"
         zoom="4"
         map-id="DEMO_MAP_ID"
         style="height: 400px"
       >
       </gmp-map>

       <!--
         The `defer` attribute causes the script to execute after the full HTML
         document has been parsed. -->
       <script
         src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=maps"
         defer
       ></script>
     </body>
   </html>
     
   ```
4. Replace <var translate="no">API_KEY</var> in the code to insert the key's alphanumeric string.
5. Save your `index.html` HTML file.
6. Load the HTML file in a web browser by dragging it from your desktop onto your browser; alternatively, double-clicking the file works on most operating systems.

## Apply API key restrictions

> [!CAUTION]
> **Caution:** An **unrestricted** API key can be used to make a request to **any** Google Maps Platform service, including the Maps JavaScript API. **You are financially responsible
> for charges caused by abuse of unrestricted API keys.**

Google strongly recommends that you restrict your API keys by limiting their
usage to only the APIs and apps that need them. Restricting API keys adds
security to your application by protecting it from unwarranted requests. API
keys support two types of restrictions:

- [API restrictions](https://cloud.google.com/docs/authentication/api-keys#adding-api-restrictions) specify which SDKs and APIs can be called using the API key. The console and the gcloud CLI require at least one API restriction when you create a key.
- [Application restrictions](https://cloud.google.com/docs/authentication/api-keys#adding-application-restrictions) specify which websites, IP addresses, or apps can use an API key.

For more information about applying restrictions, see
[Restrict your API keys](https://developers.google.com/maps/api-security-best-practices.md.txt#restricting-api-keys).

Now that you have enabled Maps JavaScript API and made a successful request, see the following for
more information on using Maps JavaScript API:

- [Use App Check to secure your API key](https://developers.google.com/maps/documentation/javascript/maps-app-check.md.txt)
- [Load the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/load-maps-js-api.md.txt)
- [Add a Google Map with Markers using HTML](https://developers.google.com/maps/documentation/javascript/add-google-map-wc-tut.md.txt)