Every website that embeds an interactive Google Map needs a Google Maps API key — a unique string that identifies your project to Google, meters your usage, and bills anything beyond the free tier. Getting one takes about five minutes; getting it right (restricted, scoped to the correct APIs, and attached to billing) is what this guide covers.
#What Is a Google Maps API Key?
An API key is a credential that accompanies every request your site makes to Google Maps Platform — map loads, geocoding lookups, place searches. Google uses it to know which project to meter, which APIs you're allowed to call, and where to send the bill above the free monthly caps.
One key can serve multiple APIs, and one project can hold multiple keys. The best practice is one key per application (your website, your iOS app, your Android app), each locked to that platform.
Related: Google Maps API pricing | How to use Google Maps API free | Google Maps vs Mapbox
#Before You Start: What You'll Need
- A Google account.
- A billing account with a payment method — for production use. Google requires billing to be enabled on the project for a standard key to serve requests. You won't necessarily pay anything when free monthly usage covers your traffic, but a valid payment method must be attached. Google also offers a limited demo key option for prototyping select Maps JavaScript API features without billing — fine for a proof of concept, not for a live site.
- Five minutes in the Google Cloud Console.
Worried about costs? The short version: free monthly usage varies by SKU. Dynamic Maps includes 10,000 free monthly loads, then its first paid band is $7.00 per 1,000. Full breakdown with examples in our Google Maps API pricing guide.
#Step 1: Create a Google Cloud Project
- Go to console.cloud.google.com and sign in.
- Open the project picker in the top bar and click New project.
- Name it something recognizable ("mysite-maps"), pick your billing account, and create it.
- Make sure the new project is selected in the picker before continuing — a surprising number of "my key doesn't work" cases are keys created in the wrong project.
#Step 2: Enable the APIs You Need
A key only works for APIs that are enabled on its project. From the console menu, go to APIs & Services → Enable APIs and services (the API Library) and enable what your site actually uses:
| API | Enable it if you need… |
|---|---|
| Maps JavaScript API | An interactive map on a web page (this is the big one) |
| Geocoding API | Converting addresses to coordinates and back |
| Places API | Address autocomplete, business details, place search |
| Maps Static API | Non-interactive map images |
| Directions API | Turn-by-turn routes |
For a typical store locator: Maps JavaScript API + Geocoding API, plus Places API if you offer address autocomplete in the search box.
#Step 3: Create the API Key
- In the console menu, go to APIs & Services → Credentials.
- Click Create credentials and choose API key.
- The key is generated instantly — a string starting with
AIza….
Don't close the dialog and walk away: an unrestricted key is a liability. Anyone who finds it in your page source can run their usage on your bill. Restrict it now.
#Step 4: Restrict Your Key (Don't Skip This)
Keys have two independent restriction layers — Google's best practice is to set both:
#Application restrictions — who can use the key
On the key's settings page, under Application restrictions, choose Websites (older docs and tutorials call this "HTTP referrers (web sites)" — same setting). Add your site's referrers, including the scheme:
1https://example.com
2https://example.com/*
3https://*.example.com
The wildcard subdomain entry covers www. and any other subdomains. For native apps, use the Android apps or iOS apps restriction instead — and give each platform its own key.
#API restrictions — what the key can call
Under API restrictions, choose Restrict key, then Select APIs and tick only the APIs from Step 2. If the key leaks, it can't be used to run up charges on APIs you never intended to expose.
Save, and give changes a few minutes to propagate.
#Step 5: Add the Key to Your Site
For the Maps JavaScript API, the key rides along in the script URL:
1<script async
2 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
3</script>
For server-side calls like geocoding, it's a query parameter:
1https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway&key=YOUR_API_KEY
Yes, the key is visible in your page source — that's expected and unavoidable for client-side maps. The referrer restriction from Step 4 is what makes that safe.
#Where to Find an Existing API Key
Inherited a project and need to know what your API key is? Go to console.cloud.google.com → APIs & Services → Credentials (with the right project selected in the picker). Every key in the project is listed there — you can view it, see its restrictions, check which APIs it may call, and regenerate it if it's been exposed.
#Fixing Common API Key Errors
The classic symptom: your map renders greyed-out with a "for development purposes only" watermark, and visitors see an alert saying "This page can't load Google Maps correctly." That message is generic — the real error is printed in the browser's developer console as a specific code:
| Console error | What's wrong | Fix |
|---|---|---|
BillingNotEnabledMapError |
No billing account on the project | Enable billing (Console → Billing) and link the project |
ApiNotActivatedMapError |
The API you're calling isn't enabled | Enable it in APIs & Services → Library (Step 2) |
RefererNotAllowedMapError |
Your page's URL isn't in the key's allowed referrers | Add the URL (with scheme, and a /* path wildcard) to the Websites restriction |
InvalidKeyMapError |
The key in your script tag doesn't exist | Re-copy the key from Credentials; check for truncation or the wrong project |
Open DevTools (F12) → Console, find the *MapError code, apply the matching fix, and allow a few minutes for restriction changes to propagate.
#Key Security Habits Worth Keeping
- One key per platform — web, iOS, Android each get their own, restricted accordingly.
- Separate keys for dev and production — so localhost testing never has to loosen your production restrictions.
- Regenerate if exposed — if a key ever ships unrestricted or lands in a public repo, regenerate it in Credentials and update your site.
- Watch usage — the console's APIs & Services dashboard shows per-API traffic, so a scraped or abused key shows up as a traffic spike, not a surprise invoice.
#The Store Locator Shortcut
If the reason you need an API key is a store locator, you only need the key itself — not the weeks of build on top of it. StoreRocket runs a complete locator — search, filters, clustering, geocoding pipeline, and analytics — on a Google Maps or Mapbox key you control. You do Steps 1–4 once, paste the key into your dashboard, and skip the part where you build everything else. Try it free for 7 days.
#Frequently Asked Questions
#Is a Google Maps API key free?
The key itself is free, and free monthly usage varies by SKU. Dynamic Maps includes 10,000 free monthly loads, then its first paid band is $7.00 per 1,000. A standard key requires billing to be enabled on the project even if usage stays within the free allowance. See our full pricing breakdown.
#Do I need a credit card to get a Google Maps API key?
For production use, the project needs a billing account with a valid payment method. Google's setup documentation requires a payment method rather than specifying a credit card. Its demo key option lets you prototype select Maps JavaScript API features without billing, but a live website needs the real thing.
#Can I use Google Maps on my website without an API key?
Not for the interactive JavaScript map — API requests without a valid key fail. The exception is a basic Google Maps embed iframe (the "Share → Embed a map" snippet from google.com/maps), which works keyless but gives you a single fixed pin with no search, styling, or multiple locations.
#How do I find my existing Google Maps API key?
In the Google Cloud Console: select the right project in the top project picker, then go to APIs & Services → Credentials. All API keys for the project are listed there, along with their restrictions.
#Why does my map say "for development purposes only"?
That watermark, along with the "This page can't load Google Maps correctly" alert, means your key has a configuration problem — most often billing not enabled on the project. Open the browser console to find the specific code (BillingNotEnabledMapError, ApiNotActivatedMapError, RefererNotAllowedMapError, or InvalidKeyMapError) and fix that underlying issue.
#How should I restrict my Google Maps API key?
Apply both layers: an application restriction (choose "Websites" and list your domains with scheme and wildcards, e.g. https://*.example.com) and an API restriction (Restrict key → select only the APIs you actually use). Together they make a leaked key nearly useless to anyone else.
#How many API keys do I need?
One per application platform is the best practice: one for your website (referrer-restricted), one per mobile app (app-restricted), and ideally separate dev and production keys. All of them can live in the same Cloud project and share its free tier and billing.
#Does one API key work for multiple APIs?
Yes — a single key can call every API enabled on its project, and you control the exact list via API restrictions. What's billed is the usage per API, not the number of keys.