How to Generate an API Key for Google Maps API

Yukthi Hettiarachchi
3 min readJun 27, 2023

--

To use Google Maps API, you need to generate an API key from the Google Cloud Platform Console. This article will guide you through the process of creating an API key for Google Maps API.

Step 1: Create a Google Cloud Platform Project

  1. Go to the Google Cloud Platform Console.
  2. Click on the project drop-down and select “New Project”.
  3. Give your project a name and click on the “Create” button.

Step 2: Enable the Google Maps JavaScript API

  1. In the Google Cloud Platform Console, select your project from the project drop-down.
  2. In the left sidebar, click on “APIs & Services” and then “Library”.
  3. Search for “Google Maps JavaScript API” and click on it.
  4. Click on the “Enable” button to enable the API for your project.

Step 3: Create an API Key

  1. In the left sidebar, click on “APIs & Services” and then “Credentials”.
  2. Click on the “Create Credentials” button and select “API key” from the drop-down menu.
  3. A new API key will be created. You can copy it and use it in your application.

Step 4: Restrict the API Key (Optional)

Restricting the API key adds an extra layer of security to prevent unauthorized use and billing. You can choose to restrict the API key based on the referrer URL or IP address.

  1. In the API key creation window, click on the “Restrict key” button.
  2. Under the “Application restrictions” section, select the desired restriction type.
  • To restrict by referrer URL, choose “HTTP referrers” and add the URLs from which your application will make requests.
  • To restrict by IP address, choose “IP addresses” and add the allowed IP addresses.

3. Under the “API restrictions” section, select “Maps JavaScript API”.

4. Click on the “Save” button to apply the restrictions.

Step 5: Use the API Key

Once you have generated the API key, you can start using it in your application. Depending on the library or framework you are using, you may need to add the API key to the respective configuration file or use it directly in your code.

For example, in a React.js application using the @react-google-maps/api library, you would add the API key in the useLoadScript hook:

const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: 'YOUR_API_KEY',
libraries,
});

Replace 'YOUR_API_KEY' with the API key you obtained in Step 3.

Generating an API key for Google Maps API allows you to access and use the powerful mapping and location-based services provided by Google. By following the steps outlined in this article, you should now have an API key that can be used in your applications to integrate Google Maps functionality. Remember to keep your API key secure and consider applying appropriate restrictions for added security.

NOTE : If you are using the Google Maps Platform for a commercial purpose, you will need to add your credit card details to your API key in order to pay for the usage. The amount you pay will depend on the number of requests you make and the type of APIs you use.

You can find more information about Google Maps Platform pricing here: https://cloud.google.com/maps-platform/pricing

--

--

Yukthi Hettiarachchi

University of Moratuwa undergrad with a passion for IT, AI, and IoT. Sharing insights and opinions on Medium