(847) 625-1774 sherry@sinkwebdesign.com
screenshot of Google Maps with a location marker

Set up Google Maps API account and key

Search Engine Optimization, Tutorials, WordPress

* This post was originally written for and posted on 9 Planets Design blog.

Is the Google map on your website broken? If so, you’ll need an API key (and a credit card) to get it working again.

NOTE: Google maps now require a paid account. Find out how to avoid unexpected costs here in Sink Web Design’s article Google Maps API Changes and Costs.

How to Set Up Your Google Maps API Billing Account and Key

screenshot of step 1 to Enable Google Maps Platform

Select a Project

  • “Select a Project” already should be highlighted. In the field provided, give your project a name (such as the name of your website). If you’ve already created projects, there will be a drop-down menu to choose from your various projects.
  • Click the YES button to agree to terms of service and click Next
  • Wait for the billing prompt popup box and select Create Billing Account.

screenshot of pop-up where you enable your project name with Google Maps

Create Billing Account

*Once the billing has been set up, you can move on to create your API key so that Google maps will display properly on your website.

  • In the next box, choose the correct Country from the drop-down menu
  • Choose YES or NO for whether you want email updates on the latest from Google
  • Choose YES to terms of service
  • Click Agree and Continue
  • In the Customer Info box, choose your Account Type (Individual or Business)
  • Enter a Business Name for your account
  • Fill in the Name and Location fields
  • Add credit or debit card info
  • Click button to finish (it may say either “Submit and enable billing” or “Start my free trial”)

screenshot for setting up your billing account in Google Maps Platform

NOTE: according to Google, you pay for this service only after you accrue costs, via an automatic charge when you reach your billing threshold or 30 days after your last automatic payment, whichever comes first. Google says that most websites will never owe anything because their map loads count will never go over 28,000 (which is the point at which they start charging you). They promise not to bill without your permission and will alert you if you’re getting close to hitting that 28,000 map loads mark. (For further billing settings, go to Google Cloud Platform > Billing > Budgets & alerts)

To see map loads usage on your website so that you know what your average is from month to month, you can log into your Google account at any time, go to the Google Cloud Platform area > APIs and Services and see map loads on the Dashboard page.

Create API Key

A popup box may welcome you, then let you know how many Google Maps Platform API(s) you are enabled to have and that you are ready to create an API key for implementation.

  • Click Next to continue
  • A popup box will appear with an API key for you to use on your website. Copy this key (Control-C or Command-C) and paste it into your website where a Google API key is required*.
  • Once you’ve copied the API key from the Google Maps Platform box, click Done or the “Restrict this key’s usage in the API Console” (more info about restricting your API key below).

screenshot of box with API key provided by Google

*Examples: 1) If you use the WP Google Maps plugin, log into your website and go to Dashboard > Maps > Settings and add your API key in the field labeled “Paste your API key here and save”; OR 2) If you use a plugin like Events Manager, you’d log into your site, go to Dashboard > Events > Settings, click on General tab, and enter the API key in the field labeled “Google Maps API Browser Key”; OR 3) if you use the Divi WordPress theme, you would go into Divi > Theme Options > General tab, scroll down to the Google API Key field, paste the API key there, then hit Save Changes, and you’re done! It all depends on where you’re using your Google maps.

API Credentials: another place to create your API key

  • From the main Google Cloud Platform, choose APIs & Services from the left-hand sidebar
  • Click the Credentials option
  • Click the “Create credentials” button and choose API key from the drop-down menu provided
  • A popup box appears with an API key for you to use – copy the key and click Close or Restrict Key (more info about restricting your API key below)

From this point forward, going to Google Cloud Platform > APIs & Services > Credentials will show you all the API keys you’ve created and saved.

Restrict your API Key – IMPORTANT!

You’ll want to restrict access to your API key to avoid it getting stolen — if someone uses your API key, it could push you over your monthly quota and cause Google to charge you fees.

  • Once you’ve copied your API key from the box, click Restrict Key (instead of clicking the Done button)
  • Under Application restrictions, select HTTP referrers (web sites)
  • In the field provided under “Accept requests from these HTTP referrers (web sites),” replace the example.com with your own domain name like this: *.domain.com/* and *domain.com/*
  • Example: *.sinkwebdesign.com/*,*sinkwebdesign.com/*

  • Click Save

screenshot for how to restrict your API key for security

Hang in there! ONE FINAL STEP TO GO…

Enable Required API Functions

  • From the left-hand sidebar, choose Library
  • Under the Maps section, click on Maps JavaScript API
  • The JavaScript API should already be enabled (like in the screenshot below). If it is not, click Enable from the Google Maps JavaScript API window.

screenshot of Google Cloud Platform API library

screenshot of enabled google maps javascript API

Sometimes Google does not activate all the required APIs and you will have to manually enable them (just like for the JavaScript API). The following is a list of all the APIs that need to be enabled along with your JavaScript API:

  • Google Street View Image API
  • Google Places API Web Service
  • Google Maps Geocoding API
  • Google Maps Directions API
  • Google Maps Distance Matrix API
  • Google Maps Geolocation API

Choose each one from the Library and enable just like listed above for the Maps JavaScript API.

At last you’re done!

That’s a truckload of steps, so if you have any questions about this process or need assistance getting set up, please don’t hesitate to contact Google or contact Sink Web Design for help.

NOW IT’S YOUR TURN

Have you tried out the new Google Maps API process? How do you feel about this new pricing plan? Please share in the comments below. You never know who might read your words and benefit from your knowledge and experience.

And if there’s a topic you’d like to see covered here in the blog, please let us know.

SHARE THIS ARTICLE ON

Pin It on Pinterest