1. Home
  2. Docs
  3. Plugin Features
  4. Business Directory
  5. Google Maps API

Google Maps API

Add Google Maps to your Business Directory

The Chamber Dashboard Business Directory offers a couple of options to use Google Maps in your Directory:

  1. Link to Directions – This does not require any API key at all. A link to directions will automatically display on individual Business pages when an address is entered.
  2. Map of all listings – This requires both a browser API and a server API key & displays some or all listings from your Directory on a Google Map.
  3. Display Google Map on single Business listings – This requires both a browser API and a server API key.

Maps won’t display

In June of 2018, Google Maps changed the process required to access and use Google Maps on a website. Google now requires that you set up an account on the Google Maps Console in order to use their API to add Google Maps to your site.

If you are getting an error ‘Page can’t load Google Maps’, follow the four steps below to generate a Google Maps API Key

Google Maps API - this page can't load Google maps correctly

Generate Google Maps API Key

How to get a Google Maps API key

Step 1: Create an Google Maps Account

• Go to https://developers.google.com/maps/documentation/javascript/get-api-key (external link)
• Click on ‘Get Started’
• Select ‘Maps’

Google Map API Key 2

• Click on ‘Select a create project’
• Rename ‘My Project’ with your project name.

Google Map API Key 3

• Setup a Billing Account. If you are not already using Google Cloud products, you’ll need to create a billing account.
• Enter an account name. (Use your site or project name to keep things simple) and select the organization.

• Setup billing profile, then click Submit to enable billing.

NOTE: Google gives users $200 free usage every month (external link) for maps, routes and places.  This gives you up to 28 000 map requests and 40 000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.

  • Next click on ‘Enable Maps Platform’ or ‘Create API Credentials’.
  • Follow the prompts to generate your API key.
Google Map API Key 5

Step 2: Enable Google Map API Services

In order to use your Google Maps API key with Chamber Dashboard, you will need to enable geolocation, geocoding and maps javascript.

  • Return to the Google Maps API console (external link).
  • You should see your project name at the top left of the page.
  • Click on ‘Enable APIs’ button.
  • From the Maps API library, enable geocoding, geolocation and maps javascript.

Your API dashboard should look similar to this when you are finished, with your project name at the top and a list of enabled API services below.

Google Maps Console, API Services dashboard, geocoding enabled
enable geocoding, geolocation and maps javascript

Step 3: Create 2 API keys

In order to display maps that use the Business listing’s current address on your Directory pages, you need both:

  • Browser side API key: displays maps on your site.
  • Server side API key: pulls new address info to front end of site.

From your Google Maps API console (external link) dashboard, switch from the dashboard view to credentials view.

If you have already created an API key above, you will see this key in the credentials view.

  • Click on ‘Create Credentials’ to create a second API key.

Next we’ll restrict your keys so that they can only be used on your website.

  • Click to edit one of your API keys.
  • Change the name of the key to ‘browser key‘.
  • Restrict your key by HTTP referrer.
  • Enter your website domain twice as shown below.
  • Be sure to save your changes
  • Edit the other API key.
  • Change the name of the key to ‘server key‘.
  • Select restrict by IP address.
  • Enter both IP address of the nameservers on your web host*. (Usually these are found in the cPanel, however you may need to contact your hosting company for the IP addresses. If you are calling the company, be sure to ask for CIDR notation for Google Maps of the server IP address.)
  • Scroll down to set the API restrictions for the key.
  • Select Geocoding API.
  • Be sure to save your changes.

*In most cases, the nameserver IP addresses should work. If not, you will need to contact your host directly in order to get the correct ‘server IP address (es)’. Ask for the server IP addresses that you need to use for Google Maps API keys. Let them know you have already tried the nameserver IP’s, but they are not working.
(The Business Directory plugin will work without specifying a server IP Address. However, to keep your API key secure, we recommend adding your server IP information if possible.)

Step 4: Add both keys to Chamber Dashboard settings

  • Login to your WordPress website.
  • Go to the Chamber Dashboard >> Directory Settings.
  • Enter both the browser and server keys and click ‘save’.

That’s it!  Google Maps will now show up in your Directory.

NOTE: If you already have an API key setup, be sure to login to your Google Cloud Console (external link) and enable:
> geolocation
> geocoding
> maps javascript


Some of the most common issues for setting up a Google Maps API key are:

The Business Directory plugin is not up-to-date. Go to your plugins page to update your Business Directory to the most recent version.

API Keys not entered in the correct field: Check to be sure that your browser API key is entered in the Chamber Dashboard settings field for the browser key and your server API key is entered into the Chamber Dashboard settings field for the server key.

The HTTP Referrers are not entered correctly: Scroll up to Step 3 to make sure your format exactly matches the example shown.

Billing is not enabled on your Google Maps Console (external link). Google Maps requires that billing be enabled in order to display maps on your WordPress website. Login to your Google Maps Console to enable billing (external link).

Maps not showing at all on individual listings:

  • Check to be sure you have set maps to display on the Directory settings page.
  • Check to be sure the address is correctly entered, including the country.

Server API not working: Check with your website host to be sure you are using the static outbound server IP address based on Google’s server IP setup requirements.

Try removing the server IP addresses:

The Business Directory plugin will work without specifying a server IP Address. Try removing all server IP addresses and the API restriction to see if this resolves your issue.

NOTE: We do recommend adding your server IP information to keep your API key secure. However, temporarily removing the server IP’s may help narrow down what is causing the issue.

Troubleshooting maps display

Was this article helpful to you? Yes 4 No