Navigation
Articles

Article •

Map

Table of contents

Show customers the location of your physical store with a map. Add opening hours and contact information to let customers contact you at your location.

Get a Google Maps API key

Emporium uses the Google Maps Embed API from the Google Maps Platform to display an interactive map on your online store. By using the Google Maps Embed API, you accept the Google Maps Platform Terms of Service.

To get a Google Maps API key, you must:

  • create a Google Cloud Project,
  • enable the Google Maps Embed API,
  • create credentials from the Google Cloud Console.

Create a Google Cloud Project

  1. Go to the Google Cloud Console.
  2. Optional: If prompted, sign in to Google Cloud Platform with your Google Account.
  3. Click CREATE PROJECT.
  4. In the Project name field, input a name.
  5. Click CREATE.

Enable the Google Maps Embed API

  1. Go to Maps Embed API in the Google Cloud Console.
  2. Click ENABLE.
  3. In the dialog that appears, click CANCEL.

The Google Maps Embed API is available at no charge, and you can use the API without having a billing account.

Create an API key

  1. Go to the Google Cloud Console.
  2. Go to APIs & Services → Credentials.
  3. Click CREATE CREDENTIALS.
  4. Select API key.
  5. In the dialog that appears, copy your API key.

Restrict your Google Maps API key

It’s recommended to restrict your API key to prevent other people from using it. If you don’t restrict your API key, then it could be used on websites unknown to you.

Add application restrictions

  1. Go to the Google Cloud Console.
  2. Go to APIs & Services → Credentials.
  3. Under API Keys, select your API key.
  4. Under Application restrictions, check HTTP referrers (web sites).
  5. Click SAVE.

Add website restrictions

  1. Go to the Google Cloud Console.
  2. Go to APIs & Services → Credentials.
  3. Under API Keys, select your API key.
  4. Under Website restrictions, click ADD AN ITEM.
  5. In the Referrer field, input your first referrer value.
  6. Click DONE.
  7. In the Referrer field, input your second referrer value.
  8. Click DONE.
  9. Click SAVE.

e.g. Your online store’s domain is example.com.

Your two referrer values are:

  1. example.com
  2. example.com/*

e.g. Your online store’s domain is example-store.myshopify.com.

Your two referrer values are:

  1. example-store.myshopify.com
  2. example-store.myshopify.com/*

Add API restrictions

  1. Go to the Google Cloud Console.
  2. Go to APIs & Services → Credentials.
  3. Under API Keys, select your API key.
  4. Under API restrictions, check Restrict key.
  5. Click Select APIs, select Maps Embed API and click OK.
  6. Click SAVE.

Get a Place ID

  1. Go to Place IDs on the Google Maps Platform.
  2. In the interactive map, in the Enter a location field, search for a location.
  3. In the list that appears, select a location.
  4. Copy the location’s Place ID.

Add a Google Map

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. Click icon-add.svg Add section, then click Map.
  4. In the Google Maps API key field, input your API key.
  5. In the Google Maps Place ID field, input a Place ID.

Display opening hours

Let customers know when to visit your physical store.

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. Under the Map section, click icon-add.svg Add block, then click Address.
  4. In the Address rich text field, input some opening hours.

Use Shift + Enter on the keyboard to enter a new line without a space.

Add an email address

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. Under the Map section, click icon-add.svg Add block, then click Email address.
  4. Optional: Check Show icon.
  5. In the Email field, input an email address.
  6. Optional: Check Enable link.

Add a phone number

  1. From your Shopify admin, go to Online Store → Themes.
  2. Next to Emporium, click Customize.
  3. Under the Map section, click icon-add.svg Add block, then click Phone number.
  4. Optional: Check Show icon.
  5. In the Phone number field, input a phone number.
  6. Optional: Check Enable link.