Almost every Shopify theme has a map section - the "find us" block on the contact page. And in almost every theme, the first time you switch it on, it shows a grey box or a message asking for an API key.
The reason is simple: Google no longer serves its maps without a key. The good news - for a typical online store this still costs nothing. It takes about 15 minutes and one step most people skip: restricting the key.
Do you actually need an API key
It depends on what you want.
If all you need is a simple map on the contact page, you may not need a key at all. Find your address on Google Maps, click Share -> Embed a map and paste the iframe code into a Shopify page using the HTML editor. It works right away, for free, with no setup.
A key is required when you use the theme map section - the one with custom colours, a branded marker or several store locations. Those sections rely on the Maps JavaScript API, which simply will not load without a key. The same applies to store locators and address autocomplete at checkout through third-party apps.
How to create a Google Maps API key
1. Create a Google Cloud project
Go to the Google Cloud Console and sign in with an account you will keep long term - ideally a company one, not personal. At the top, open the project selector -> New Project and give it a clear name, for example "Mystore-Maps". If you already use Google Cloud, an existing project works too.
2. Enable billing
Google Maps Platform requires a billing account linked to the project, even for free-tier usage. Console -> Billing -> attach a billing account to your project. New Google Cloud customers get a 300 USD welcome credit valid for 90 days.
If you would rather not enter a card straight away, Google offers a Maps Demo Key - a temporary key for prototyping with no billing details. It is fine for checking whether the section works at all, but not for a live store: it has daily limits, and once you hit them the map stops loading until the next day.
3. Enable the right APIs
Console -> APIs & Services -> Enable APIs and Services. Enable only what you need:
- Maps JavaScript API - for the interactive theme map section
- Maps Embed API - if your theme uses a simple iframe
- Geocoding API - if the section takes a written address instead of coordinates
- Places API - if you need address search with suggestions anywhere
For most Shopify themes the first one is enough, often together with Geocoding. Do not enable everything in sight - the fewer services are active, the smaller the damage if the key ever leaks.
4. Create the key
Console -> APIs & Services -> Credentials -> Create credentials -> API key. You will get a long string of characters - that is your key. Copy it, but keep the window open.
5. Restrict the key
This step matters most and is the one usually skipped. An unrestricted key is publicly visible in your storefront code - anyone can take it and use it in their own project at your expense.
In the same key settings:
- Application restrictions -> choose Websites and add your domains. Use the full address including the protocol:
https://yourstore.com/*,https://*.yourstore.com/*and, importantly,https://yourstore.myshopify.com/*- without the last one the map will not render in the theme editor preview. - API restrictions -> choose Restrict key and tick only the APIs you enabled in step 3.
- Click Save. Changes take a few minutes to apply.
It is also worth setting a budget alert in Billing, say 10 EUR. If something goes wrong you will find out by email, not at the end of the month.
6. Paste the key into your theme
Shopify Admin -> Online Store -> Themes -> Customize -> find the map section -> the Google Maps API key field. Paste the key, save and reload the preview. If the map is still blank, wait 2-5 minutes: restrictions do not take effect instantly.
What it really costs
Since March 2025 Google has dropped the shared 200 USD monthly credit and replaced it with a separate free monthly allowance per service: 10,000 calls for Essentials services (including Maps JavaScript API and Geocoding), 5,000 for Pro and 1,000 for Enterprise services.
In practice: 10,000 map loads a month is roughly what an average small online store's contact page sees. For most businesses the bill stays at 0 EUR. The Maps Embed API is free with no request limit at all.
Risk appears in two cases only: when the map sits on every page (in the footer, for instance), or when an unrestricted key gets picked up by someone else.
Most common mistakes
- Billing not enabled. Key created, API enabled, but the map shows an error - in 90% of cases there is no billing account attached.
- The myshopify.com domain forgotten. Works on the live site, not in the theme editor.
- An unrestricted key. Works perfectly until someone finds it in your code.
- Geocoding API not enabled. The theme passes a written address but cannot turn it into coordinates - the map stays blank.
- The key hardcoded into the theme. Always use the section settings field, so it can be changed without a developer.
What to do next
If the map still does not work, or you need a multi-location map, a filterable store locator or address autocomplete at checkout, that is Shopify programming work. Get in touch - we will tell you whether it is a couple of hours of work or needs a proper solution.
