Table of Contents
In order for the app to work properly please update the API Key to keep the app working properly for your site. Please note that if you did not setup your own Google Maps API, the map will stop displaying after 7 days. Here are 6 main steps to create an API key:
Step 1: Create a billing account
This step will guide you in creating a Google Billing Account.. If you already have a billing account, you can skip this step.
You must first have an active Google Account. Go to Google Cloud Platform Console, sign in to your Google account. Then, you click on the menu button and select Billing.
After that, you will see the Add billing account button on the My billing accounts tab. Click on that button and fill in all the required information including Name, Address, Card number:
Step 2: Enable billing for your project
To let the API work, the Google platform asks you to enable billing for your project. One more time, click on the menu button and choose the Billing section.
Then, you just need to link the project with your billing accounts.
Step 3: Enable 5 types of API
The Store Locator app requires the following 5 API to be enabled in order to run:
Direction
Geocoding
Geolocation
Maps JavaScript
Place APIs,
To Enable them, first select the menu button and then select APIs & Services and click on Library.
Next, Select View All button and choose the stated 5 APIs.
If the APIs are already selected, indicate a green tick stating "API enabled" and displays the Manage button.
Otherwise, it will show the Enable. Click on that button to enable them for your project.
Step 4: Create an API Key
To create an API key, you need to select the menu button and select APIs & Services > Credentials.
On the Credentials page, you click Create credentials and choose API key.
Google platform will automatically create for you an API but you need to restrict this API.
Step 5: Restrict the API key
To restrict the API you click on the Edit icon, the platform will bring you to the Restrict and rename API key page.
Rename it as "Store Locator" for easier reference and in Application restrictions select None:
For the API restrictions, select the "Restrict key" option and click on all 5 types of APIs, including Direction API, Geocoding API, Geolocation API, Maps Javascript API, and Places API.
Step 6: Apply the API key to Store Locator App
The last step is to apply the Google API key that you had just created to the app. To do that, load the app from your Shopify admin, then go to the Settings section and enter your API key into the API Key field in the General tab:
Don't forget to click on the Save after you add the API Key to the app.