google maps api key blog thumb

A Google Maps API Key is like a password that allows your website to display interactive maps from Google’s Map platform. Without this Key, your website will produce an error if you try to embed/add a Google Map on one of your pages.

Although Google has both documentation and an instructional video available to guide you in creating these keys, they are a bit generalized (and at times a bit technical). So, in this post we provide specific steps on how to get a Google Maps key for use on your website.


STEP 1: Create a Google account (if you don’t have one already):


STEP 2: Open the Google Cloud Platform Console (logging in with your Google Account):


STEP 3: Create a New Project (or select an existing one, if you have one)
This is found at the top left of the page, just to the right of the “Google Cloud Platform” logo. See the following screenshots for reference.
First this:

Screenshot of Google Cloud Platform - select project

And then this:

 Screenshot of Google Cloud Platform - New Project

STEP 4: Give your project a name
(perhaps based on your website’s name).
You can leave the Location field as-is for now. Click Create.

Screenshot of Google Cloud Platform - New Project naming

STEP 5: Select the Project you just created
. You can do this by the notification at the top right:
(or if you missed this notification, simply go back to the dashboard and select your project from the top-left:

Screenshot of Google Cloud Platform - Select Project notification

STEP 6: Create the API key
. On the API Credentials page click the “+CREATE CREDENTIALS” button, and then choose “API Key”. NOTE: your selected project should be shown in the top-left.

Screenshot of Google Cloud Platform - Create API key

You can close the window that shows your key for now.

STEP 7: Restrict the Key.
Click the Edit icon next to your newly created Key:

Screenshot of Google Cloud Platform - Edit API key

Under “Application restrictions”, Choose “HTTP referrers (websites)” and then under “Website restrictions”, click “ADD AN ITEM” for each web address you need to be able to serve maps on. To save you the effort of adding every page on your website, you can use an asterisk (*) to act as a ‘wildcard’.  Most websites will only need two (the live website, such as “*” and the staging/test site; for example, “*”). See the following screenshot for reference. Once entered, you can hit Save.
NOTE: don’t worry about the “API restrictions” field at the bottom, you can leave this as “Don’t restrict key”.

Screenshot of Google Cloud Platform - API Key restrictions

STEP 8: Enable the various Map services.
In short, visit each of the links below, and click ‘Enable’

    1. Maps Embed API:
    2. Maps JavaScript API:

FYI: more Map-related services can be turned on here, but for now these two should do what we need.


STEP 9: Set up billing and budgets

For many low-traffic sites, Google Maps will be free. BUT, you still have Billing information attached to your account. You can also set thresholds so that you aren’t changed more than expected (e.g., $0)

Screenshot of Google Cloud Platform - Add Billing account

Walk through the following screens (adding your phone, address, and payment information).

  • Now, let’s set a Budget (

Screenshot of Google Cloud Platform - Create budget button

  • Give the Budget a name. Leave Time Range as Monthly. Leave the Projects as ‘All’, and Services as ‘All’, then hit Next

Screenshot of Google Cloud Platform - Create budget form

  • In the Amount step, here you can set the budget as $0 so you won’t be billed. If you get a large amount of traffic that passes their ‘free’ threshold, the maps will stop working, so you can decide if you want to increase this budget at a later date. See their pricing page for more information. Hit Next when ready.

Screenshot of Google Cloud Platform - Set budget amount

  • Lastly, you can set Actions to trigger if your billing threshold is hit. If you opted to use $0 on the previous step, you can just delete the default actions and hit Finish.

Screenshot of Google Cloud Platform - Delete budget action

STEP 10: share the key with your web developer. Go back to the Credentials page, click the “show key” button beside your key, then copy and send this to your dev team.