commercebuild Success Portal commercebuild Success Portal

  • Home
  • Submit a Ticket
  • Updates
  • Login
  • Contact Us
Home / Tutorials / Configuring Your Google API Key

Configuring Your Google API Key

637 views 1 min , 30 sec read 0

The Google API key is required for three features in the web store:

  • Blog, if you choose to use Google’s Blogger service. (Blogger API)
  • Store Locator (Maps JavaScript API, Geocoding API, and Places API)
  • Google Address Auto Complete (Maps JavaScript API, Places API)

Each of these APIs requires the enabling of specific services to function correctly. Our recommendation is enable all applicable APIs and then configure your API key to use those APIs. This tutorial will cover how to achieve this.

Sign Up for Google Cloud Platform

To get signed up, you will need to visit the Google Cloud Platform (GCP) Console. You can use your existing Google account, if you have one. Once there, you will also be asked to set up your billing account. Once your billing account is set up, you can begin enabling the required APIs.

Enable APIs

As mentioned above, we recommend enabling all APIs that can be used in the web store. However, you may also only enable the APIs that you will use for now. For example, Google Address Auto Complete only requires Maps JavaScript API and the Places API.

To enable APIs, just follow these direct links and click the Enable button.

  • Blogger API (Blog)
  • Geocoding API (Store Locator)
  • Maps JavaScript API (Google Address Auto Complete, Store Locator)
  • Places API (Google Address Auto Complete, Store Locator)

Once these APIs are enabled, you can create an API key that will be authorized to use these APIs.

Create Your API Key

To create your API key, go to Credentials, click + Create Credentials, and then click API key.

An API key will then be created. Copy your API key, and then click RESTRICT KEY.

Website Restrictions

We recommend only allowing your API key to be used on specific websites. Please be sure to use * to include subdomains of your web store’s domain and also include our staging and production domains, like so:

API Restrictions

For added security, please also restrict your API to the aforementioned Google API services, like so:

Finally, click Save to finish the configuration of your API key.

Install Your API Key

The final step is to go to your web store and paste your new API key into Google API Settings. Go to System > Site Settings and scroll down to the bottom of the page to locate this section.

Once you paste your API key, go to the top of the page and click Apply.

Note that it could take a few hours for these settings to take effect. If after waiting for a bit you’re still not seeing the functionality in the web store, view your browser console to see if the Google APIs are returning any noteworthy errors.

webstore Tutorials

About Bradly Hale

View all posts by Bradly Hale →

Related Articles

  • How to Enable reCAPTCHA on Custom Forms
  • Adding a custom message to the shipping step at checkout
  • How to configure Stripe as a payment method
  • SQL Server Change Tracking Query for Sage 300 and X3

Popular Articles

  • Enable Firewall Rules and a JavaScript Browser Challenge 2247 16
  • Enable Cloudflare Rate Limiting 2134 0
  • How to Add a JavaScript Snippet 1994 8
  • IP Allowlist 1945 0
  • Signing up for Cloudflare and Configuring Your Domain 1812 4

New Articles

  • Error when adding a new user: Email is already in use 676 0
  • How to Check commercebuild Payments Version 913 0
  • How to Enable reCAPTCHA on Custom Forms 820 0
  • Manually posting an order 970 0
  • Adding a custom message to the shipping step at checkout 785 0
© commercebuild 2022. All rights reserved.