How to set up a Google API map in Cloud Console

Google Maps are no longer "free", instead you get an allowed amount of hits on a map before they start to charge you. This means a more complex set up, with various pitfalls. Follow this guide to learn how to do it right.

Background

Back in the day, the Google Maps API could be used by anyone and you could put it on your website and it would just work, no matter how much or how little traffic you got.

Things have changed in more recent times.  The Google Maps API, specifically the JavaScript API, uses a pay-as-you-go pricing model and Developers and site owners must use Googles Cloud Console to set up and manage every website that uses API Maps on it.  You can still embed regular Google Maps that you access via the "Maps" tab in the Google search results page.

Why do you need to set up Cloud Console?

Because of how Google Maps has changed, sites which had existing maps on them may find that they stop working correctly.  You may see an errors like these below when you view your Google map on your website:

Setting up Cloud Console

Head on over to Google Cloud Console.  If you are not signed in, you will be greeted with the following screen:

Sign in using your Google Account, or create a new one.

Once logged in, I see the last project I worked on and can now click the Projects dropdown top left to start a new one. You may see a slightly different view to this, but look for that Projects dropdown menu:

You can then click New Project top right in the popup/modal that appears listing all projects:

 

Enable the Maps JavaScript API

Your new Project won't have all APIs enabled, you need to choose the ones you want to use.  In this case we want to use the Maps JavaScript API, so click Enabled APIs & Services:

On the next screen there is a long list of API's but the easiest thing to do is search for the Maps JavaScript API, then click on the result:

Choose this one...

Then click Enable here:

You'll then be presented with a popup/modal with an API key and it's onto the next step...

Save your API key

You'll now be presented the your API key, which is unique to this project/website:

Save your API key in a safe place and input it into your website's map code where it calls the API, so that the map uses this key.  Example code is:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJyio8XqVmgkuvU7L8NK1vNRdlWafCcd0; ?>"></script>

As you can see Google has also imposed a budget alert to let you know just in case your project starts to cost money.  This will only happen if you get a lot of visits to your site and is unlikely on a new website, but it's better to be safe than sorry!

Protect your key

As you can see, your key is public, so unless you protect it anyone could use it in their app and cost you money!  The next step is about protecting the usage of your key and it's very very important.

Most of the time, I choose to protect it based on the referrer, i.e. the domain that the map will sit on.  So if your website's domain is fredbloggs.com, then enter *.fredbloggs.com/* in the box.  This will mean it works on any subdomain, e.g. dev.fredbloggs.com and on any sub page, e.g. fredbloggs.com/contact.

Complete your profile

On the next screen you then click to Complete Profile:

Google asks for some feedback and to build a starter map which you can skip if you want to:

Making changes to your project

If you need to edit anything, it is all contained in the left hand navigation:

Billing

Infact, there are actually two different left-hand navigations.  To get to Billing click the hamburger icon then the Billing link at the bottom:

It's a bit strange how this works.  Per billing account you can only have a certain number of projects, so for an agency like us, we have multiple billing accounts so that we can manage maps for many clients.

If your project is a one-off you won't have this complication.

Ensure you have added your payment method here:

Set spending limits

As we saw earlier Google enable a $200 monthly spending alert on your account now by default, but you can still change this and prevent spending that much on your map.

As I mentioned before, you would need quite a high-traffic website to incur a charge, but to change it, follow these steps:

1. Go to Billing, then Budgets & alerts in the left hand menu:

2. You can then click to Create Budget, you can see here we have one that is capped at £20/month and has alerts when we reach 50%, 90% and 100% of the budget allowance:

3. The full settings used for this budget are:

Changing the restrictions on the API Key

Google already encouraged us to restrict our API key, which is a good move.  If you need to change that restriction, you can go to Keys and credentials in the left hand navigation:

Then click the "three dots" on the right of the table and Edit API key:

And the following screen contains all the settings you'll ever need to restrict your key!

Including a setting to restrict your API key to just the Maps API, or just Maps and Places API etc:

Troubleshooting

If you find your map isn't working, you can check the list of errors that Google provide

To find out which error you have, you need to check your browser console, by pressing F12 on your keyboard in Chrome.   If you are not used to looking at the DevTools it can be overwhelming, but click on the "Console" tab and you will see an error message in red:

In this case, the error is the ReferringNotAllowedMapError, so the API key is restricted to certain referrers (domains) and we need to amend our setting in Cloud Console to include the current website.

Conclusion.

Google Cloud Console is an impressive management tool for all your API integrations, but is quite complicated, and can offer a daunting array of different settings to the casual observer.  I hope this guide proves useful and helps you fix your Google Map errors or set up a new Google Map.