Register a Google Maps API key
You can add a map section to your theme to show the location of your business. Many of the free themes from Shopify include a map section that you can add to your home page.
For the map to display, you will need to register a Google Maps API key and include it in the map section settings in the theme editor.
On this page
Using the Google Maps Platform
By using Google's API to add a map section to your theme, you are agreeing to the Google Maps Platform Terms of Service.
On June 11, 2018, the Google Maps Platform introduced a number of changes to how Google Maps APIs are organized and used. Using these APIs requires setting up a billing account with the Google Maps Platform. You are provided a monthly credit on an ongoing basis to cover services up to a threshold.
For more information about pricing, see the Google Maps Platform pricing and billing documentation.
Register a Google Maps API key
You can register a Google Maps API key.
Steps:
Visit the Google Maps Platform page and click Get started.
Select the Maps, Routes, and Places products to get the APIs that are needed to work with the free themes Map section.
Click Continue.
Either create a new name or select an existing project.
After agreeing to the terms of service, click Next.
Create a billing account with the Google Maps Platform. A billing account is a requirement in the new Google Maps Platform. For more information, see the Google Maps Platform pricing and billing documentation.
After enabling the Google Maps Platform, copy your new Google Maps API key to your clipboard.
Add your Google Maps API key to your theme
You can add your Google Maps API key to your theme.
Steps:
Desktop
iPhone
- From the Shopify app, tap the … button.
- In the Sales channels section, tap Online Store.
- Tap Manage all themes.
- Find the theme that you want to edit, and then tap Customize.
- Tap Edit.
- Click Add section.
- Click Map, and then click Select.
- Enter the information for your map. In the Google Maps API key field, paste your Google Maps API key.
- Click Save.
Android
- From the Shopify app, tap the … button.
- In the Sales channels section, tap Online Store.
- Tap Manage all themes.
- Find the theme that you want to edit, and then tap Customize.
- Tap Edit.
- Click Add section.
- Click Map, and then click Select.
- Enter the information for your map. In the Google Maps API key field, paste your Google Maps API key.
- Click Save.
If there is ever an error in communicating with Google Maps Platform's APIS, then the map is replaced by the background image or color that you have specified in the theme editor.
Restrict API access to only your store
Google Maps Platform prompts you to restrict access to your API. Your API key is a unique identifier for your map that prevents others from using your API key by restricting its access to only your domains.
Steps:
Go to the Google API credentials page.
Select your project from the menu.
Choose the API key that you generated to begin editing.
Under Application restrictions, click HTTP referrers (web sites) and enter any domain associated with your store, including your
.myshopify.com
domain. For example, if you have a custom domain, then enter bothhttps://myCustomDomain.com/*
andhttps://shop1.myshopify.com/*
.Click Save.
Alternatives to using the Google Maps Platform
If you want to display a map on your website, but not use the Google Maps Platform's services, you can place an embedded map on your page.
Embedded maps use an HTML <iframe>
which can be placed into any page or homepage section that provides a rich text input field.