Set up the Maps JavaScript API

Page Summary

• Google Maps Platform requires an API key for authentication and billing purposes, associating your project with a unique alphanumeric string.

• You can create and manage API keys via the Google Cloud Console or the Cloud SDK, enabling access and specifying restrictions for security.

• Restricting API keys is highly recommended, limiting usage to specific applications and websites for enhanced security.

• Include your API key in every Maps JavaScript API request, replacing YOUR_API_KEY in the provided script snippet.

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

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.

2. Verify that you have a Google Cloud Account.

   Sign in to the Google Cloud console
   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.

3. Verify that you have a Google Cloud project with billing enabled.

   Go to the Billing page
   Note: If you are a new user and don't have a Google Cloud project, see Getting started with Google Maps Platform.
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.

Enable the API

Before you can use Maps JavaScript API, you must use the Google Cloud console or the gcloud command to enable it in your Google Cloud project.

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

2. Click the Enable button.

   Note: If the API is already enabled, you see the Manage button instead of Enable.

gcloud

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

Read more about the Google Cloud SDK, Cloud SDK installation, and the following commands:

• gcloud services enable
• gcloud 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 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

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.

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 and Add API restrictions in the Google Cloud documentation.

gcloud

Replace PROJECT_ID with your project ID in the following commands.

• Create a new key: Run the following command, and replace DISPLAY_NAME with a name for the key.

  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, Cloud SDK installation, and the following commands:

  • gcloud services api-keys create

• Use an existing key: Run the following command, and replace KEY_ID with the ID of the key. The --append flag keeps the APIs that the key already allows. Without it, the command replaces them.

  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, Cloud SDK installation, and the following commands:

  • gcloud services api-keys update
  • gcloud 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:

   <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 API_KEY 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: 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 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 specify which websites, IP addresses, or apps can use an API key.

For more information about applying restrictions, see Restrict your 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
• Load the Maps JavaScript API
• Add a Google Map with Markers using HTML