In order to use any Google Maps service, you must enable the relevant Google API Libraries, and obtain a Google Maps API key which you'll add to our App settings page.
If you already have a Google Cloud Platform account:
Visit the Google Cloud Platform, sign into your Google Account if asked.
Select the desired project from the top right of the screen, if you haven't created one already, you'll be asked to do so at this stage.
If you don't have a Google Account or have not previously used Google Cloud Platform:
Visit the Google Maps Platform website, and click the 'Get Started' box.
Choose the 'Maps' and 'Places' checkboxes and click continue.
You don't have to choose both, you can just choose Maps and enable/disable libraries in the next steps.
Log in or create a new account in the next screen.
Follow the next instructions to set up your project name and billing details.
At the last step, Google will create new API key for you and enable some API libraries, we'll cover these in following steps.
The first thing you need to do before you can use any Google API is to set up a billing account to pay for your usage. If you already have the billing account, you can skip this step.
Google offers a $200 monthly credit for using the Google Maps Platform and most users won't exceed this (It will cover more than 25 000 map views per month). For more information about billing, check out Google's Maps Platform Pricing page here.
Go to the Google API credentials page.
Select your project from the menu.
Go to Library
Select Maps JavaScript API and enable it
Enable Maps JavaScript Api
Copy the API key that you generated and click on Google Maps Platform
Go to Credentials and Edit API key
Under Application restrictions, click Websites and enter domain associated with your store, including your .myshopify.com
domain. For example:
*.[mydomain]
(Replace [mydomain]
with your domain (e.g: example.com)
[your-domain]
(Replace [mydomain]
with your domain (e.g: example.com)
*.myshopify.com
https://shop.app
https://shopify.com
Click Save
Add the copied API key to the settings Our app -> Settings -> Shipping settings -> Google Map
A map button will be enabled automatically.