We are going to give you step-by-step instructions on how to set up a Google Maps API key for use on your website. Navigating the Google Cloud console isn't entirely straight forward but it's easy if you know where you're going. It should only take about 10 minutes.

Since June 11, 2018 it's been a requirement that a billing account and API key are required to access Google Maps API. Read about it here. Setting up an API key can be a bit daunting the first time you do it. Especially if you're not used to this type of work. 

>Ensure you are logged in to Google with the account you want to use. Then navigate to https://console.cloud.google.com/

The first thing we need to do is set up billing on your account if it's not done already. Choose Billing from the sidebar menu then Add billing account. Follow the steps to register a credit card.

Select APIs & Services > Dashboard from the sidebar menu .Click Create to create a new project. Give it a name that makes sense. For this walkthrough my project is called "Demo Project". You can call it what ever you like. It takes a few moments for the project to be created. Once it's ready, you should see a page like this:

Notice "Demo Project" is selected in the toolbar at the top of the page. You can switch between projects here if you manage more than one set of APIs. Select your project if it's not selected.

From the sidebar menu click Credentials. Then Create credentials > API key. You will be given an API key. It's a unique string of 40 characters. Copy this and paste it into your password manager or somewhere safe. This is what you will need to provide to your web developer or enter into your application. When you have the API key recorded somewhere we can start enabling APIs for our application. Notice the link to Restrict Key. Ignore that for now. We'll come back to that.

From the sidebar menu click APIs & Services > Library.

For most applications that just require a Google map for the contact form just the MAPS Javascript API is required. More complex applications may require the Places API or  Geocoding API. Select the API, read the overview if you like then click the blue ENABLE button to add it to your application. Go back and repeat to add as many APIs as required. You can see below we've added the Places API and Maps Javascript API to our application. If you are unsure what you need you can add them all. You are only billed for what your application actually uses.

Now it's time to restrict, or secure, the key. This part is important. If the key's usage isn't restricted then anybody can steal it and use it for their own applications. And you will foot the bill. Always restrict your key.

Your key is currently unsecured so you should see an exclamation mark and a warning with a link to restrict the key. Click it now. If you don't see it, click Credentials in the left hand column and then select your API key.

First give your API key a name if you like. It's not really important. Then under Application restrictions we are going to restrict the API to HTTP referres (web sites) and limit accest to our own domains. The protocol uses wildcards so most entries will look like this.

*yourdomain.com.au/*

 As long as the calling site contains yourdomain.com.au/ the API will accept the request. All these will work:

https://www.yourdomain.com.au/index.php
http://yourdomain.com.au/home.html
http://subdomain.yourdomain.com.au/some/file/path/

You can add as many domains as you like. You can even use *localhost* or an IP address. Make sure you click Save.

Next under API restrictions we select the APIs we need. In the screenshot below you can see this API is restricted to use on joomstore.com.au and shows the enabled APIs.

And..... you're done.

On the Credentials page you should now see an API key without any warnings. Well done.