Maps

The theme has functionality for a Google map that can show a single location.

There are a few configuration options, like map zoom level, map color schemes, and text box color scheme. The text box can have any copy you like. We recommend adding the map address in text here as a minimum.
In order to get this map to work, you will need to have a Google Maps Javascript API key which requires a Google Cloud account.
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: https://mapsplatform.google.com/
Steps to setup a Google Maps account:
  1. Visit the Google Maps Platform page and click Get started. https://mapsplatform.google.com
  2. Select the Maps, Routes, and Places products to get the APIs that are needed to work with the free themes Map section.
  3. Click Continue.
  4. Either create a new name or select an existing project.
  5. After agreeing to the terms of service, click Next.
  6. 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.
  7. After enabling the Google Maps Platform, copy your new Google Maps API key to your clipboard.
The next step within Google is to  Restrict the API key to be used on only your Shopify store's domain, so that bad actors can’t steal it and use it on their website and rack up a bunch of bills on your account. This step is important because it’s not difficult to find the API key by inspecting the webpage in any browser:
  1. Go to the Google API credentials page: https://console.cloud.google.com/projectselector2/apis/credentials
  2. Select your project from the menu.
  3. Choose the API key that you generated to begin editing.
  4. 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 both https://myCustomDomain.com/* and https://shop1.myshopify.com/*.
  5. Click Save
Adding the API Key to the theme:
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Navigate to “Theme Settings”, which is the second icon, the paintbrush icon on the far left menu of the theme editor.
  4. Choose “Maps” from the list of settings.
  5. Paste your API key in the “Google Maps API key” field.
After that is complete, you can add a Map section to any page and customize the map within each Map section!

One thing that’s really valuable to note, is that there is a “Backup image” option in each Map section. If you don’t want to go through the process of getting a Maps API key, you can upload an image here that will show instead of the map if when there is no API key entered. You could take a screenshot of a map on google.com/maps and upload it here to display instead of the interactive Google map. This backup image will also display if there is ever an error and the Google map doesn't show.

Still need help? Contact Us Contact Us