Get Google Maps API Key: Step 2 – Restrict API Key

Setting up your Google Maps widget involves three simple steps. You're currently on:

For safety, we recommend restricting your API key before use. Since API keys are publicly accessible, anyone with basic Developer Tools knowledge can find and misuse them, possibly leading to deactivation due to quota limits. Restricting the key helps prevent misuse.

In this guide, we'll show you how to set two important restrictions: website restrictions and API restrictions. Website restrictions limit key use to specific websites, while API restrictions ensure the key only accesses the services you need.

1. Add website restrictions

1

First, ensure you're in the correct project → click Credentials → click your API key:

Click Websites → then Add:

2

We suggest limiting your API key to your domain and Elfsight apps only. Add the following:

1. *.elfsight.com/*
2. Your domain, in the format https://your-domain.com/* (replace your-domain.com with your actual domain)
3. Your domain, in the format https://www.your-domain.com/* (replace your-domain.com with your actual domain)

Example:

If needed, you can restrict domains differently, depending on where you want the API key to work. Refer to the instructions on the left side of the API key editor or check this page.

If you're installing the widget in an iframe via Share Link, add two more entries:

1. *.elf.site/*
2. https://widget.elfsig.ht/*

Example:

3

Click Save to apply changes:

Well done! The website restrictions are now applied! 🎉

It may take up to 5 minutes for the restrictions to take effect.

2. Enable required APIs

The widget requires these three APIs:

1. Directions API
2. Geocoding API
3. Maps JavaScript API

Now, we'll show you how to enable just these three and disable the others.

1

Scroll to API restrictions → click Restrict key:

2

By default, there may be around 27 maps-related APIs enabled for your project. Open the dropdown with APIs, uncheck the ones you don't need → click OK → click Save:

If no maps-related APIs are listed, you probably didn't enable them when creating the project:

Don't worry—just enable them manually. Open these links for the three required APIs:

1. Directions API
2. Geocoding API
3. Maps JavaScript API

Make sure you're in the correct project and click Enable for each API:

Go back to APIs & Services → Credentials → click your API key:

Go back to steps 1 and 2: check the APIs you need, then click OK → Save as shown in those steps.

It may take up to 5 minutes for the new restrictions to take effect.

Great job! You've enabled the required APIs! 👏