Create a Google Maps API key (extensibility)
To add a map from Service Point in checkout or thank you extensibility, you need to generate a Google Maps API key.
Please note: Activating the map in the module via a Google API key represents an additional cost invoiced by Google. This monthly amount (based on the number of maps displayed) can represent a high cost. We will not issue any refunds for Google API fees. You must ensure that these costs are reasonable for your business.
Here are Google's prices for its service -> Google Maps API prices
Create a Google Maps Javascript API key
- Go to the Google developer site. If you already have an account, go to step 3. Otherwise, create an account -> https://console.cloud.google.com/
Accept Google's terms and conditions
- If you haven't yet created a project, you should do so now. If you have already created a project in the past, proceed to step 7.
Click on"Select a project
Click on"NEW PROJECT
Give it a name and select your Organization
Check that you're in the right project, and search for"credentials" or"identifiants". Select API credentials to go to your project's API menu
Click on"ENABLE APIS AND SERVICES".
Search for"maps javascript API" and select the corresponding Google API
Click on ENABLE to activate it
If you haven't already done so, Google should ask you to add a credit card. Follow these two steps to set up your payment method
Google should then display your API key in a popup window. Keep this API key, as you will need to add it to the checkout block in Shopify.
- Next, protect your API key. This step is very important to prevent other sites from using your key.
Protecting your API key
⚠️ If you don't restrict the use of your key to certain sites (your domain), any company will be able to use your key on its site.
Select your project and search for "credentials". Select API credentials to go to your project's API menu.
Go to the "credentials" menu and click on "Edit API key" in the Actions menu (three vertical dots).
In application restriction, select Websites
Add the four sites below, replacing "MERCHANT-DOMAIN" with the domain of your Shopify site
- https://shop.app
- https://shopify.com
- https://[MERCHANT-DOMAIN].com -> Example: If your site is accessible at www.monsite.com, enter https://monsite.com.
- https://*.[MERCHANT-DOMAIN].com -> Example: If your site is accessible at www.monsite.com, you would enter https://*.monsite.com.
- Click on SAVE
- Add your API key to Shopify by following this tutorial and check that the card is displayed in Checkout. You'll need to repeat the operation for Checkout and Thank You extensibility.
