Get Your Google Maps API Keys for Joomla Extensions

beginners guide to google maps api key

The Google Maps API is used to power good number of Joomla extensions, including some here at Joomlashack: JCal Pro, jInbound, and Shack Locations.

Recently, Google introduced a few changes to their Maps API. They added extra functionality, new pricing, and enforced  the use of an API key. Previously, you could use the Maps API without a key, but that's no longer possible.

In this guide, we'll show you how to obtain your Google Maps API key for a production site and run your Joomlashack extensions with full Google Maps API support.

This is a three-step process:

  1. Create a Google Maps JavaScript API key.
  2. Link your Google Maps project to a billing account.
  3. Add the additional Geocoding and Directions APIs.

Step #1. Create a Google Maps JavaScript API key

Click Create

You will see the New Project screen.

  1. Enter your project name into the Project Name field. For the purpose of this tutorial, I entered Shack Locations.
  2. Click CREATE.

Click Create

  • After a short pause, you will see your project name next to Google Cloud Platform:

After a short pause, you will see your project name

  • Click the navigation icon to the left of the Google Cloud Platform title:

Click the navigation icon to the left of the Google Cloud Platform

  • Next, go to APIs & Services and click Credentials:

Click Credentials

On the next screen:

  1. Click Create credentials.
  2. Click API key.

Click API key

  • You will see the API key created box. Click RESTRICT KEY:

Click Restrict Key

You will be taken to the API key tab.

Scroll down the page to the Application restrictions section.

  1. Click HTTP referrers (web sites).
  2. Enter your web site URL into the box underneath.
  3. Add the forward slash / and the asterisk * symbols after your site domain name. You should end up with something similar to https://example.com/*. If your site resides in a sub-domain, add *. before your site domain name, such as https://.*example.com/*. This way you will be free to use your API key both in the sub-domain and in the main domain.
  4. Click Save.

Click Save

  • You will be taken to the Credentials screen with the Credentials tab listing you Google Maps JavaScripts API key:

You will be taken to the Credentials screen

Excellent! You now have your Google Maps JavaScript API key. For the key to work on a production website, you need to link it to a billing account in the Google Cloud Platform.


Step #2. Link your key to a billing account

Once you enable billing, you will get $300-worth free usage for your Google Maps JavaScript API key.

  • In your Google Cloud Platform, go to Billing:

billing menu link

  • Click Link a billing account:

click link a billing account

  • Click CREATE BILLING ACCOUNT:

click create billing account

  • On the next page, click on both Yes radio buttons and click AGREE AND CONTINUE:

click agree and continue

  • On the next page, enter your customer information:
    • Your account type.
    • Your tax information.
    • Your name and address.
    • Your card details.
  • Submit your details.

Everything being well, you should see the Thanks for signing up for the 12-month free trial box. Click GOT IT to close it:

welcome to free trial message


Step #3. Add the additional Geocoding and Directions APIs

For Shack Locations to operate properly, you need to add the Geocoding and Directions APIs to your enabled Google APIs.

Let's add them one by one.

  • In your Google Cloud Platform account, click APIs:

click apis

  • In the Additional APIs section, click Geocoding API:

click geocoding api

  • You will be taken to the Geocoding API page. Click Enable:

click enable

  • You will see the Geocoding API screen:

geocoding api enabled

  • Repeat the same step for the Directions API.

Good job! You can now use your Joomlashack extension with Google APIs.


What's next?

Save over 60% when you sign up to the Everything Club today!

You will get access to JCal Pro, jInbound, Shack Locations as well as all our other extensions and templates.