1. Visit the Google Cloud Console
2. Create an Account or Login
Sign in with your Google account.
If you don’t have one, click Create Account and follow the prompts.
3. Create a new Project
In the top navigation bar, click the Project dropdown.
Click "New Project".
Name your project (e.g. Addressly Widget) and click Create.
4. Enable required APIs
Go to APIs & Services > Library, then:
Search for and enable:
Maps JavaScript API
Places API
Geocoding API
5. Set up Billing
To use the Google Maps APIs, you must link a billing account:
In the Google Cloud Console, click the navigation menu (☰).
Go to Billing > Manage billing accounts.
Follow the steps to set up billing using a credit or debit card.
Link the billing account to your project.
Note: As of March 2025, Google has introduced free monthly usage caps per API instead of a general credit. These limits vary by service tier (Essentials, Pro, Enterprise) and typically cover the needs of small to medium-sized businesses. For full details, refer to Google’s billing documentation.
6. Create an API Key
Go to APIs & Services > Credentials
Click “+ Create Credentials” > API key
Your key will be generated — copy this key.
7. Add Restrictions
Click on the newly created API key and:
Under Application restrictions, choose:
HTTP referrers (web sites) for browser use
Add your domain(s) (e.g. yourstore.com/*)
Under API restrictions, limit usage to:
Maps JavaScript API
Places API
Geocoding API
Click Save (It may take up to five minutes for settings to take effect)
8. Use the API Key in Your Shopify Theme
In Shopify, go to Online Store > Themes > Customize
Navigate to the App embeds section
Find Addressly → Paste your API key in the Google Maps API Key field
Enable the embed if it’s not already enabled
Click Save
9. Ensure widget is visible
Go to:
Sections > Apps > Addressly
Make sure the block titled “Delivering to” is added to your theme
(e.g. in the announcement bar or main header section)
Troubleshooting
Problem | Solution |
Map not loading | Check that both Maps JavaScript API and Places API are enabled. Confirm you’ve saved the API key in the theme editor. |
Console error: "API key not valid" | Ensure you copied the full API key without extra spaces. Also, double-check your API restrictions. |
Referrer not allowed | Make sure your domain is correctly added under "HTTP referrers" with the /* wildcard at the end. |
Billing issues | Ensure billing is enabled for your Google Cloud project. Google Maps APIs require billing, even for free-tier usage. |
FAQ
Q: Is the Google Maps API free?A: As of March 2025, Google has introduced free monthly usage caps per API instead of a general credit. These limits vary by service tier (Essentials, Pro, Enterprise) and typically cover the needs of small to medium-sized businesses. For full details, refer to Google’s billing documentation.
Q: Can I use the same API key for multiple stores? A: Yes, but you must add each store’s domain to the referrer restrictions.
Q: Where exactly do I paste the key in Shopify? A: In the theme editor, go to App Embeds > Addressly and paste it in the Google Maps API Key field.
Q: Do I need to enable billing on Google Cloud? A: Yes, even for free-tier use, billing must be enabled.
Book a call