If you’ve ever tried adding a map to your website using Google Maps Platform, you’ve probably run into something called an “API key.”
At first glance, it can sound technical—or even intimidating. But here’s the good news: it’s actually much simpler than it seems.
In this guide, I’ll walk you through the exact steps to generate your Google Maps API key from scratch—no jargon, no confusion. By the end, you’ll have your key ready and your map working perfectly.
Step 1: Go to Google Maps Platform
Start by visiting the Google Maps Platform:
Sign in with your Google account.
Once you’re in:
- Accept the terms of service
- Create a new project (if you don’t already have one)
- Give your project a name—anything meaningful to you
This project will hold your API settings and credentials.
Step 2: Enable the Maps JavaScript API
Now that your project is ready, it’s time to enable the API you’ll actually use.
- Open the menu and go to APIs & Services
- Click on Library
- Search for Maps JavaScript API
- Click Enable
This API is specifically designed for websites. (There are separate APIs for Android and iOS if you need them later.)
Step 3: Set Up Billing (Required)
This is where many people get stuck—but don’t worry, it’s straightforward.
To use Google Maps APIs, you must enable billing on your account.
Here’s what you need to know:
- Google gives you $200 in free usage every month
- You won’t be charged automatically
- The card is mainly used for verification
⚠️ Important: Even for testing, your map won’t work unless billing is enabled.
Step 4: Create Your API Key
Now for the main part—generating your API key.
- Go to APIs & Services → Credentials
- Click Create Credentials
- Select API Key
That’s it! Your API key will be generated instantly.
👉 Make sure to copy it and store it somewhere safe.
Step 5: Secure Your API Key (Very Important)
An unrestricted API key can be misused, so it’s important to lock it down.
Here’s how to secure it:
- Click Edit API Key
- Under Application restrictions, choose Websites (HTTP referrers)
- Enter your domain (e.g.,
yourwebsite.com) - Save your changes
This ensures only your website can use your API key.
within your project.
Will Google charge me automatically?
No. You’ll only be charged if:
You manually upgrade your plan, or
You exceed the free monthly limit
Why does it say “For development purposes only”?
This usually means billing isn’t enabled.
Even during development, billing must be active for the map to work properly.
Do I need a separate API key for Places API?
No. You can use the same API key—just enable the Places API within your project.
What does “Billing not enabled” mean?
It means your API key isn’t linked to a billing account yet.
To fix it:
Go to your project settings
Connect a billing account
What happens if my API key gets exposed?
If your API key is publicly visible (for example, in your frontend code), others could potentially use it and consume your quota.
To stay safe:
Restrict your key to your domain
Limit it to specific APIs
If needed, you can always:
Regenerate the key
Delete the compromised key
Why isn’t my map showing?
If your map isn’t loading, it’s usually due to one of these:
Incorrect or missing API key
Maps JavaScript API not enabled
Billing not active
API key restrictions misconfigured
👉 Open your browser’s developer console—it will usually show the exact error message.
Leave a Reply