When your website uses tools from Google, such as a Google map, Google requires an API Key. This key is your license to use their services and Google tracks your frequency of use. They will charge if your site's usage goes beyond their free tier limits, which are set very high. Google Maps pricing model is too complex to describe here, but your use will most likely be free if you have less that 100,000 map views per month.
Because of Google's key structure, we ask our clients to obtain an API key for their websites inside their own Google account. Your Google account must have billing enabled and a credit card on file for the API key to work, even if you are within the free usage.
- Visit the Google developer console
- Log in with your Google account
Every API Key must belong to a project. So let's create a project first.
- In the left sidebar, click Credentials
- In the box that says "To view this page, select a project", click the button on the right that says Create
- Enter the name of your project (e.g. "Acme Company") then click the button that says Create
- You should now see your project selected in the upper left of the page, to the right of the Google logo
Now that we have our project, let's add the API key to it.
- Once again, click on Credentials in the left sidebar
- Click on the blue button that says Create Credentials and then select API Key
- A window will appear with your new API key in it. It is a long series of random letters and numbers. Please provide this key to Web Instinct.
- We want to be sure that only your website uses this key. So click where it says Restrict Key and move to the next tab here in this tutorial.
To protect your key and assure that others are not using your quota, we want to tell Google to only allow your website to use your key. Here is how to do that.
- At the top of the page, name your key. (e.g. "Acme Company Website")
- Under Application restrictions, select HTTP referrers (web sites)
- Under Website restrictions, click where it says ADD AN ITEM
- Enter your domain name in the box like this: *.example.com/*. For example, if we wanted to secure our website, we would enter *.webinstinct.com/*. Use your website's domain name.
- Under the domain box, click Done
- Under API restrictions, leave Don't restrict key selected
- At the bottom, click the blue Save button.
You did it! You should now see the API key in your list of keys. We need to enable a few additional items for your key. Go to the next tab.
The key is enabled on most of Google's services. But there are a few we often use that need to be enabled manually. Here is how to do that.
- In the left sidebar, click on Library
- Find the library called Geolocation API and click on it.
- On the page that comes up, click the button at the top that says Enable. (If the button says Manage, then you're already all set!)
- Repeat steps 2 and 3 for the library called Geocoding API
- Repeat steps 2 and 3 for the library called Maps JavaScript API
The key will only work if you add billing credentials. Go to the next tab.
Most of our clients fall well within the free tier of usage. However, even if you never pay for Google maps, you still need to have a payment method on file for the key to work. Here is how to add a payment method:
- In the search box at the top, enter billing, and select Billing from the results. (You can also click the hamburger menu in the top left corner of the page and select Billing from the navigation menu that appears.)
- Click the button that says Link a billing account
- In the window that appears, click Create billing account
- Follow the steps to create your billing account on Google Cloud. Then click the blue Start My Free Trial button. (Your card will not be charged.)
You will be taken back to the Billing Overview page, which shows your new billing account. Look under where it says Projects linked to this billing account and you should see the project you created at the beginning of this tutorial. If so, you're all set!
Remember to provide us your API key. You can always view the key again by clicking the navigation icon in the top left of the page and migrating to APIs & Services > Credentials.