Setting up Your Google Maps API Key

Before you can begin using the Google Maps feature, you’ll need to create a free API key from Google. This allows Google to recognize your website and display a map. It’s simple to setup. Just follow the steps below.

Heads up! As of June 22, 2016, Google Maps requires an API key. Prior to this date, the API key was optional with our themes. Maps will no longer work unless the key has been entered.

Create a New Project

You’ll need to generate an API key from Google. Before doing so, you’ll need to create or select an existing project to associate it with.

  • Click on the “Get a Key” button and you’ll see a window like this
  • Select an existing project or create a new one
  • If it’s a new project, give it a unique name
screenshot-67

Your New API Key

screenshot-68
You should then be rewarded with a brand spanking new API key! This is the gold nugget we need so copy and paste it somewhere. You’ll need it in one of the following steps.

Next, click on the “Go to Console” button so we can verify the APIs we require are active and restrict usage to only your website.

Verify APIs are Enabled

Now you should be on your dashboard where you can monitor API usage and see which APIs are enabled.

In order for your API key to work with our themes, you need to make sure the following APIs are enabled. By default, they should already be enabled so this step is just to double-check.

  • Google Maps Geocoding API
  • Google Maps JavaScript API
  • Google Places API Web Service
  • Google Maps Directions API

If any of the above APIs are NOT listed, you’ll need to manually enable them. Just click on the “Enable API” link at the top of your dashboard.

screenshot-69

Add Your API Key

vantage-google-api-key
classipress-google-api-key

Login to your website and navigate to the Google Maps API key field. You’ll want to enter it and save. Your website should now display maps and geocode addresses correctly (assuming you enabled all required APIs listed above).

Note: the API key field location will vary depending on which theme and version you are using. In most cases, you’ll find it under the “Geo Services” => “Map – Google” section. In Vantage 4.0+, it is located under “Settings” => “Maps”.

If you have ClassiPress and don’t see the API key field, make sure to upgrade to the latest version (3.5.6 or greater).

Restrict API Key Access

This step is optional but recommended.

Since you’ve confirmed your new API works, it’s time to improve security and lock down usage to only your website.

  • Click on the “Credentials” link in the sidebar
  • Find your new API key and click on the pencil edit icon
  • Give your key a name. Typically, the name of your website works best
  • Set the key restriction to “HTTP referrers (web sites)
  • Enter your website url. Use the following format: *.mywebsite.com/* The asterisk is a wildcard so sub-domains will be included
  • Click the blue “Save” button

You’ve now whitelisted your domain name(s) and limited requests to only http referrers. This prevents quota theft of your precious daily API request limit (2,500).

Note: If you are presented with “You Don’t Have Permission to Create an API Key“, see the Common Issues section below.

screenshot-70
screenshot-71

Common Issues

If you weren’t able to get through the steps above, these issues may be able to help.

You Don’t Have Permission to Create an API Key

When trying to setup an API key, you may receive this message. It means exactly what it says.

You’ll need to create new credentials before an API key can be generated.

  • Click on the “Credentials” link in the lefthand sidebar
  • Click the “Create credentials” button
  • Select the “API Key” option
  • Then click the “Browser key” button from the pop-up

Now you’ll be taken back to the create a browser key step above and can proceed.

google-browser-api-key-no-perms
google-new-credentials
google-create-new-key

 

Missing API Key Error

If you see the following message, it most likely means you don’t have an API key setup with your theme. Follow the steps above to create and add your API key to your theme.

If you did follow the steps above and it’s still not working, read on.

  • It may take up to 5 minutes for your new API key to take effect.
  • Confirm you copied and pasted the entire API key into your theme options. The first or last characters can sometimes be cutoff by mistake.
  • Make sure your domain name matches the one you registered with the API key. A slight misspelling or different domain name extension will prevent maps from working (e.g. www.test.co vs www.test.co.uk).
  • Make sure you enabled the Maps API under the same project that you generated your API key. Each project allows you to enable/disable APIs.

google-maps-oops-error-api-key-missing

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: 5
Rating: 3.5 - 8 votes

Popular Add-ons

cp iLike

CP iLike

The CP iLike plugin allows your users to "Like" blog posts and ad listings.…


(1)
$12

Order Exporter

Export your order details to a CSV file. Fully customizable and works with…


(1)
$19

Category List for ClassiPress

Inserts an ad category list bar via a simple shortcode.


(6)
$9