In June 2018, Google updated its policy and now mandates that all websites possess a unique Google Maps API Key. If you don't have your own API Key, your map won't function on your store locator.

Signing up one is free, despite Google also adjusting its pricing structure. Each Google Maps API Key provides $200 in monthly free credits

The free (monthly) credits allows for up to:

• more 40,000 calls to the Geocoding API

• more 40,000 calls to the Geolocation API

• more 20,000 map loads for the Maps JavaScript API

• more 50,000 requests to the Places API

Most websites fall under the $200 monthly free tier. If you need more information, read https://mapsplatform.google.com/#get-started

Step 1

Get started on how to get your own Google Maps API Key.

Sign in to your Google account or create a new one (it's free) if you don't already have one.

After you are logged, click on this link: Google Maps Platform - Get Started.

Choose both Maps and Places in the modal pop-up, then click Continue.

Step 2

Make a new project and give it any name you like. Then hit Next.

Step 3

Starting July 16, 2018, Google's updated policy requires you to set up a billing account, even if you won't be charged, to obtain a Google Maps API Key. If you haven't set one up already, you'll be prompted to create a new billing account.

Click Create Billing Account.

Then, choose your country, accept the Terms of Service, and click on Agree and Continue.

Now it's time to enter your information as an Individual or Business, whichever is appropriate for you. Fill out all the details, including payment methods (note that there is no charge for signing up), and click Start My Free Trial.

If all went well, you should now be able to view your Google Cloud Platform Console.

Step 4

Click the menu icon in the top left corner, then select APIs & Services, and finally click on Dashboard.

On the new page, click on the ENABLE APIS AND SERVICES button.

We must now enable the 4 APIs required for your store locator to function optimally.

In the search field, type "Maps JavaScript" and then click on the Maps JavaScript API.

Next, you'll be taken to the Maps JavaScript API page. Simply click the blue ENABLE button.

After a few seconds, you will be redirected to the detailed page of the recently enabled Maps JavaScript API. No action is required here, so simply click the back (product details) arrow to return.

As before, type the name of the next API to be enabled in the search field. The next API is the Geocoding API. As soon as you type it, you will see it appear below the search field. Click on it and enable it, just as you did for the Maps JavaScript API.

the same steps for other 2 APIs.

• Search for the Geolocation API, enable it

• Search for the Places API, enable it

After enabling the 4 APIs: Maps JavaScript API, Geolocation API, Places API and Geocoding API, they will appear in the In Use APIs section on the page.

Step 5

Finally, it's time to retrieve our API Key. Click on the menu icon in the top left corner, then select API & Services, and finally click on Credentials.

Now, click on the blue Create Credentials button, and then click on the first result, API Key.

A modal pop-up with your API Key will be displayed. For security reasons (to prevent others from using your API Key), we need to restrict it. Click on the RESTRICT KEY button.

In the page, select HTTP referers (web sites) and then enter your website in the following format.

*.yourwebsite.com/*

It's important that you put the website in the same format, including the * at the beginning and the /*   at the end.

For example, if your website domain is www.thegreatdomain.com , you will enter *thegreatdomain.com/*

After you've entered your website, add the following referrers for CBMaps (so you can see the preview of your widget and we can troubleshoot any potential issues):

*cleverbooster.com/*

*myshopify.com/*

*shopify.com/*

Then click Save.

Finally, you can click the Copy to clipboard icon to copy your API Key.

Step 6 - Final

Go to the Map Provider settings page on CBMaps Store Locator.

Paste your API Key in the input field under Google Maps and click Save.

🎉Done!

That was quite a ride but it was required by Google Maps.

If everything went fine, you will now be able to paste your store locator widget code to your website and it will be visible when you visit it.

If you need help during the process or you have any questions, just message us using the live support icon you can see at the bottom right corner of this page and we'll get back to you as soon as we can.

References

https://developers.google.com/maps/documentation/javascript/cloud-setup

https://developers.google.com/maps/documentation/javascript/get-api-key