Google Maps is a service provided by Google Cloud. It has been paid since 2018, but every user who wants to use it receives a $ 200 credit each month from Google. In most cases, this amount is enough to use the service, so it is practically free.

With Google Maps you will provide your customers with a quick and convenient checkout. With Google Autocomplete functionality, they will be able to complete their orders easily and quickly. Automatically entering the customer's address reduces the time to fill in the fields when completing an order and eliminates the possibility of incorrect spelling of the address. The fields for country, city, district, postal code, etc. are automatically filled in by Google.


In this section:

First steps

To connect your CloudCart store to Google Maps you need to create your own API key, this is done in the Google console. To log in you need to have a Google account or, if you do not have one, create one. Once you've logged in, go to https://cloud.google.com/ and enter the console from the Console button located in the upper right corner of the screen. 

2. The next thing you need to do is enter the necessary information in your Billing account from the menu on the left of the screen > Billing in order to use the Google Maps service and get the initial credit of $ 300.  You have 90 days to spend this one-time credit. Then each month, the Google Maps platform offers a recurring $ 200 credit as mentioned above.  

Once you have successfully entered your details, you will receive a message about the credits added by Google that are available to you to use the services. 

Creating a project

1. Once you have completed the basic actions, it is time to move on to creating a project. By default, each newly registered user has a project created, but you can create a new one in which to set your Google Maps API key from the button  New Project.

2. Fill in the fields: project name, select your organization and its location and click the Create button to create your project. 

3. At the bottom of the navigation menu, select Google Maps Platform > Overview and select the project you have already created if you have more than one, otherwise, it will open immediately. 

You will need to enable several APIs here: 

  • Geolocation API - is used to locate according to the point where the user is located.
  • Places API - used to search for places in Google Maps, for example, when typing the name of an organization or object, Google returns the exact address where it is located. 
  • Mapa JavaScript API - this is the real library of Google Maps, which must be used. 
  • Geocoding API - used to convert addresses into coordinates. Coordinates are needed when submitting such to third services. 
  • If you want to use a static photo on the map and be visible in the administrative panel of your store, activate the Maps Static API.

Here are the 5 APIs you need. To activate each API, click on it and click Enable. 

To go back and activate the others, press APIs from the navigation menu. 

From here you can activate the other APIs by clicking on them and pressing the Enable button again. 

API key generation 

1. Once you have activated all the necessary APIs, you need to create your API key. To do this, go to the Google Maps Platform from the menu, Credentials section, and select Credentials in APIs & Services. 

2. Click the + Create Credentials button > API Key and copy the generated key. Save it to a separate file so you can use it later. 

Protect your API key

We recommend that you protect your API key, because otherwise it will be visible and can easily be stolen by intruders who can misuse and accumulate a large amount on your account. When the key is not secure you will see this icon:

1. To protect it, position the mouse cursor over the unsafe key and select edit settings.

2. You can change its name (for example with the name of your store), set different restrictions. We personally recommend that they be at the address of the website, for this purpose choose HTTP referrers (web sites) and enter your site in the New Item field and click the Done button. 

3. In the API restrictions field you can also protect your key for certain services. To do this, select the five APIs that you have previously activated (Geolocation API, Places API, Map JavaScript API, Geocoding API, Maps Static API) from the drop-down menu.  

The secure key will look like this: 

Once you have completed your settings, you need to go to the admin panel of your store and insert the API key to connect Google Maps. 

Settings in the admin panel of your CloudCart store

Before you start with the settings in your admin panel, you need to wait a while (usually about 5-10 minutes) for the service to be activated by Google, otherwise, you will receive an error message


1. To place your API key in your store, go to Settings > Cart and checkout. In the window that opens, go to the 

Miscellaneous section, and in the Google Maps API key field, place your key and click the Save button in the upper right corner of the screen.  

2. To make sure everything works correctly go to your store, select a product and add it to the cart. Continue to pay and in the checkout, choose to add an address. If all goes well, you'll see a Google map and address suggestions when entering an address. All fields will be filled in automatically when you enter an address or press the button to locate the device. 

Your key is activated, as well as the opportunities you have with the creation of Geo zones and Geo polygons. 


If someone still manages to steal your API key and tries to use it with a domain other than the one you entered in the Google console, the system will detect this and display an error message:

Creating a budget

To avoid being charged by Google for this service, you can create a budget equal to the free credits you receive from Google each month. You can also set notifications/alarms when specific amounts are reached. 


1. To do this, log in to your account and open the Google Console. From the navigation menu, select  Billing > My Billing account > Budget & Alerts.

2. In the Target Amount field, enter the budget value that you want to create. In our case, that's $ 200.

3. In the next step, set the notification when a certain percentage of the budget is reached: 

Consumption monitoring

From the Google Console, the Google Maps Platform > Metrics section, you can track how your site uses Google Maps. You have different metrics and filtering options available according to different APIs. 

The Overview provides information on how to navigate using the APIs you have enabled: 

This is all you need to connect your store to Google Maps using an API key to make it easier for customers to complete their orders. 

Troubleshooting

If, for some reason, your API key is invalid at checkout when trying to complete their order, your customers will see a "broken" card and will not be able to complete their order. In this case, you will receive an automatic notification about the existing issue in your store's admin panel.

 

Request the service

You can request the service from the button below if you need assistance with Google Maps setup. Our team will take all the necessary steps to set up and run Google Maps in your CloudCart store. 


Request