On June 2018, Google changed its policy and it now requires all websites to have their own Google Maps API Key. Without your own Google Maps API Key, your map won't be able to load on your store locator. 🌏
Creating one it's free, even though Google also adjusted its pricing model.
For each Google Maps API Key, it offers 💸 $200 of free credits per month.
$200 of free credits provides up to:
28,000 map loads for the Maps JavaScript API
70,000 requests to the Places API
40,000 calls to the Geocoding API
40,000 calls to the Geolocation API
Most of the websites will fall into this free tier of $200 per month, for more information about your own case, read this article.
Let's get started on how to get your own Google Maps API Key.
Step 1
Login into your Google account or create a new Google account if you don't have one already (it's free).
After you are logged, click on this link: Google Maps Platform - Get Started.
In the modal popup, select both Maps and Places and click Continue.
Step 2
Create a new project and name it what you prefer. Then click Next.
Step 3
If you don't have a billing account setup, you will be asked to create a new one. You won't be charged, this is now a required step in order to get a Google Maps API Key, starting July 16, 2018 as per Google updated policy.
Click Create Billing Account.
Next, select your country, accept the Terms Of Service and click Agree and Continue.
It's now time to enter your information as an Individual or as a Business, based on your needs. Fill up everything, included your payment methods (again, you won't be charged for signing up) and click Start my free trial.
At this point, if everything was okay, you should see your Google Cloud Platform Console.
Step 4
Click the menu icon at the top left corner, then click APIs & Services and then Dashboard.
In the new page, click on ENABLE APIS AND SERVICES.
We need now to activate the 4 APIs that your store locator needs in order to work at its full power.
In the white search field, type "Maps JavaScript" and click on Maps JavaScript API.
What you'll see next is the page of the Maps JavaScript API. Simply click the blue button titled ENABLE.
Wait few seconds and you'll be redirected to the detail page of the Maps JavaScript API that you just enabled. You don't have to do anything here, so click the back arrow and go back.
Like before, type in the white search field the new API to be enabled. Next in line is Geocoding API. As soon as you type you will see it right below. Click on it and enable it like you did for the Maps JavaScript API.
Repeat the same steps for other 2 APIs.
Search for the Geolocation API, enable it, go back
Search for the Places API for Web, enable it, go back
Once you enable the 4 APIs, you will see them listed in the page under the In Use APIs section.
We're almost done!
Step 5
Finally, we can proceed to grab our API Key. Click on the menu icon at the top left corner, then API & Services, then Credentials.
Now click on the blue button titled Create credentials and then on the first result API Key.
You will be presented a modal popup with your API Key. For security purposes (to avoid that other websites use your API Key) we need to restrict it. Click on RESTRICT KEY.
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.thebestshopeverimagined.com , you will enter *thebestshopeverimagined.com/*
After you've entered your website, add the following referrers for StoreRocket (so you can see the preview of your widget and we can troubleshoot any potential issues).
*storerocket.io/*
*storerocket.test/*
If you are using a platform like Shopify, you may also add this to make it work on your Shopify admin panel:
admin.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 StoreRocket.
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.